简单拖放效果
图：
实例：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<style type="text/css">
</style>
<script type="text/javascript">
function $(id) {return document.getElementById(id);}
String.prototype.getPxNumber = function() {
return Number(this.substr(0,this.length-2));
};
var oldMouseX,oldMouseY;
var oldObjectX,oldObjectY;
var dragObject;
function log(id,msg) {$(id).innerHTML = msg;}
function start(evt) {recordPosition(evt);}
function end(evt) {
recordPosition(evt);
dragObject = null;
}
function recordPosition(evt) {
var event = window.event?window.event : evt;
dragObject = event.target?event.target:event.srcElement;
oldMouseX = event.clientX;
oldMouseY = event.clientY;
oldObjectX = dragObject.style.left.getPxNumber();
oldObjectY = dragObject.style.top.getPxNumber();
log("start","oldMouseX=" + oldMouseX + ",oldMouseY=" + oldMouseY +
", oldObjectX=" + oldObjectX + ", oldObjectY=" + oldObjectY);
}
function move(evt) {
var event = window.event?window.event : evt;
var target = event.target?event.target:event.srcElement;
if (target == dragObject) {
dragObject.style.left = String(oldObjectX + event.clientX - oldMouseX) + "px";
dragObject.style.top = String(oldObjectY + event.clientY - oldMouseY) + "px";
log("move","move: top=" + dragObject.style.top + ", left=" + dragObject.style.left);
}
}
</script>
</head>
<body>
<div id=dragObject onmousedown="start(event)" onmouseup="end(event)" onmousemove="move(event)"
style="position:absolute;left:25px;top:30px;height:100px;width:100px;padding:50px;
background-color:#CCFFCC;cursor:move;">draggable</div>
<div id=start></div>
<div id=move></div>
</body>
</html>
