<html> <head> <meta http-equiv="Content" content="text/html;chartset=utf-8"> <title>test drag</title> <style type="text/css"> <!-- .drag { width:100px; height:100px; position:absolute; left:10px; top:10px; background-color:blue; } --> </style> <script type="text/javascript"> <!-- function drag(target,event) { var deltaX = event.clientX-parseInt(target.style.left); var deltaY = event.clientY-parseInt(target.style.top); document.attachEvent("onmousemove",movehandle); document.attachEvent("onmouseup",uphandle);
function movehandle() { target.style.left = event.clientX-deltaX; target.style.top = event.clientY-deltaY; }
function uphandle() { document.detachEvent("onmousemove",movehandle); document.detachEvent("onmouseup",uphandle); } } --> </script> </head> <body> <div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" onmousedown="drag(this,event);" >show me you 2</div> <div id="drag" class="drag" onmousedown="drag(this,event);" style="left:10px;top:10px;">show me you</div>
</body> </html>
