function dragMe(e) { var eo = window.event || e; //清除选择 window.getSelection && window.getSelection().removeAllRanges(); var lastLeft = parseInt(dragObj.style.left); var lastTop = parseInt(dragObj.style.top);
var cmx = eo.clientX + document.body.scrollLeft - document.body.clientLeft; var cmy = eo.clientY + document.body.scrollTop - document.body.clientTop; var cl = lastLeft + (cmx-lastX) var ct = lastTop + (cmy-lastY); dragObj.style.left = cl+'px'; dragObj.style.top = ct+'px';
完善中
基本原理是,将div设置为浮动框(position:absolute),然后鼠标onmousemove事件,读取当前拖动的div对象(event.srcElement || event.target),使得拖动对象的根据div的宽高,原来的位置(left,top),和当前的鼠标位置,以及scoll的位置,计算新的left ,top,赋予div.以前有写过个简单的。
<html>
<title>My drag test</title>
<head>
<script>
(function(){
var dragObj = null;
var lastX,lastY;
var drag = function(obj)
{
var eo = window.event || arguments.callee.caller.arguments[0];
if(isNaN(parseInt(obj.style.top))) obj.style.top = obj.offsetTop;
if(isNaN(parseInt(obj.style.left))) obj.style.left = obj.offsetLeft;
dragStart(obj,eo);
return false;
}
var dragStart = function(o,eo)
{
dragObj = o;
if(o.setCapture) o.setCapture();
else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
lastX = eo.clientX + document.body.scrollLeft - document.body.clientLeft;
lastY = eo.clientY + document.body.scrollTop - document.body.clientTop;
document.onmouseup = dragEnd;
document.onmousemove = dragMe;
return false;
}
function dragMe(e)
{
var eo = window.event || e;
//清除选择
window.getSelection && window.getSelection().removeAllRanges();
var lastLeft = parseInt(dragObj.style.left);
var lastTop = parseInt(dragObj.style.top);
var cmx = eo.clientX + document.body.scrollLeft - document.body.clientLeft;
var cmy = eo.clientY + document.body.scrollTop - document.body.clientTop; var cl = lastLeft + (cmx-lastX)
var ct = lastTop + (cmy-lastY);
dragObj.style.left = cl+'px';
dragObj.style.top = ct+'px';
lastX = cmx;
lastY = cmy;
return false;
}
function dragEnd(e)
{
document.onmousemove = null;
document.onmouseup = null;
if(dragObj.releaseCapture) dragObj.releaseCapture();
else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
dragObj = null;
return false;
}
window['drag'] = drag;
})()
</script>
</head>
<body>
<div id='ab' style="position:absolute;width:200;height:200;background:red;" onmousedown="drag(this)"></div>
<div id='ev' style="position:absolute;width:200;height:200;background:green" onmousedown="drag(this)"></div>
<div id='ex' style="position:absolute;width:200;height:200;background:yellow" onmousedown="drag(this)"></div>
</body>
</html>