简单的拖拽，有超出边界界限的检测。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0; padding: 0;} body{ position: relative;} #div{ width:100px; height:100px; background:red; position:absolute; left:0; top:0;} </style> </head> <body> <div id="div"></div> <script> function range(iNum,iMax,iMin){//检测 是否超出边界 if( iNum > iMax ){ return iMax; } else if( iNum < iMin ){ return iMin; } else{ return iNum; } } function drag(obj){ //拖拽 var disX = 0, disY = 0; obj.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - obj.offsetLeft; disY = ev.clientY - obj.offsetTop; if (obj.setCapture) obj.setCapture(); document.onmousemove = function(ev){ var ev = ev || window.event; var L = range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 ); var T = range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 ); // var L = ev.clientX - disX; // var T = ev.clientY - disY; obj.style.left = L + 'px'; obj.style.top = T + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; if (obj.releaseCapture) obj.releaseCapture(); }; return false; } } window.onload = function(){ var obj = document.getElementById('div'); drag(obj); } </script> </body> </html>