<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sytle type="text/css"> </sytle> <script>function drag(obj) {var obj=document.getElementById(obj);obj.onmousedown=function (event) {//点下鼠标 obj.setPointerCapture&&obj.releasePointerCapture();//兼容ie8，强行捕获页面点击事件到obj event=event||window.event;//event兼容性问题 var ol=event.clientX-obj.offsetLeft; var ot=event.clientY-obj.offsetTop; document.onmousemove=function (event) {//鼠标移动 event=event||window.event; var left=event.clientX-ol; var top=event.clientY-ot; obj.style.left=left+"px"; obj.style.top=top+"px"; }; document.onmouseup=function () {//释放鼠标 document.onmousemove=null;//取消鼠标移动事件 document.onmouseup=null;//取消释放鼠标事件以避免点击obj以外的东西时仍然触发onmouseup obj.releasePointerCapture&&obj.releasePointerCapture();//取消捕获 }; return false;//消除浏览器对拖拽的默认行为};}window.onload=function () { drag("box1");//调用对象 drag("box2");} </script></head><body>dal<div id="box1" style="width: 100px;height: 100px;background-color:cadetblue;position: absolute"></div><div id="box2" style="width: 100px;height: 100px;background-color:palevioletred;position: absolute;left: 200px;top: 200px"></div></body></html>
来源：https://www.cnblogs.com/jujuno/p/11142353.html