<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height:1200px; background-color: azure; } #drag{ background-color: cornflowerblue; border: 1px solid black; position: absolute; width: 200px; height: 100px; } </style> </head> <body> <div id="drag"> </div> <script> //加入文字之后拖拽容易出现选中字后跳动bug var drag = document.getElementById("drag"), text = document.createTextNode("0"), flag , time =0; drag.appendChild(text); drag.addEventListener("mousedown",dragDiv,false); function dragDiv(e){ flag = true; if(flag){ var handler = setInterval(function(){ time+=0.02; drag.innerHTML =time.toFixed(2); if(!flag){ clearInterval(handler); } },20) } var x=e.layerX||e.offsetX; var y=e.layerY||e.offsetY; document.addEventListener("mousemove",docMove,false); document.addEventListener("mouseup",function(){ flag = false; },false); function docMove(e){ if(flag){ e.preventDefault; var l =parseInt(drag.style.left); var t =parseInt(drag.style.top); drag.style.left = -x+e.pageX+"px"; drag.style.top = -y+e.pageY +"px"; } } } </script> </body> </html>
原文：http://www.cnblogs.com/VinceLeon/p/4766857.html