所用到的方法有onmousemove , onmouseup , onmousedown 按下鼠标开始拖拽，松下及停止 此方法用函数实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>鼠标事件</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: aqua; position: absolute; } #box1{ width: 100px; height: 100px; background-color: #000000; position: absolute; left: 300px; top: 300px; } </style> <script type="text/javascript"> window.onload = function(){ function drag(obj){ obj.onmousedown = function(event){ var al = event.clientX - obj.offsetLeft;//求出鼠标到盒子距离 左 var at = event.clientY - obj.offsetTop;//求出鼠标到盒子距离 上 document.onmousemove = function(event){ event = event || window.event; var left = event.clientX; var top = event.clientY; obj.style.left = left - al + "px"; obj.style.top = top -at + "px"; } document.onmouseup = function(){ document.onmousemove = null; //取消onmousemove 取消移动 document.onmouseup = null;//取消这个onmouseup } return false; //是为了去除浏览器的一些默认行为但IE8不支持 } } var box = document.getElementById("box"); var box1 = document.getElementById("box1"); drag(box1); drag(box); } </script> </head> <body> <div id="box"></div> <div id="box1"></div> </body> </html>这个方法是在页面中没有滚动条中实现的 如果页面过长可以参考这个方法会有些问题 可以参考上一篇解决点击进入
