onmousedowm:选择元素
onmousemove:移动元素
onmouseup:释放元素
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1{ width: 100px; height: 100px; background: #37b9ff; position: absolute; } #div2{ width: 100px; height: 100px; background: #ff6471; position: absolute; left: 400px; top:200px; } </style> </head> <body> <script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmousedown=function (ev) { var ev=ev||event; var disX=ev.clientX-this.offsetLeft; var disY=ev.clientY-this.offsetTop; document.onmousemove=function (ev) { //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块， // 方块就不会跟着鼠标一起移动 var ev=ev||event; oDiv.style.left=ev.clientX-disX+'px'; oDiv.style.top=ev.clientY-disY+'px'; } document.onmouseup=function () { //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块， // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是 //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document document.onmousemove=document.onmouseup=null; } } } </script> <div id="div1"></div> <div id="div2"></div> </body> </html>
拖拽出现的问题：
1、拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下的时候，如果页面有文字被选中，那么会触发浏览器默认拖拽文字的效果
解决： 标准下： 阻止默认行为 ------oDiv.onmousedown的function(){}最后return false;则可以阻止默认行为
非标准IE下：设置全局捕获
2、拖拽图片也会产生问题： 原因和解决办法同上
设置全局捕获：
元素.setcapture() 当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件。当有事件发生时，就会被当前设置了全局捕获的元素所触发。
在IE下：有，并且有效果
火狐：有，没有效果
chrome：没有
封装：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1{ width: 100px; height: 100px; background: #37b9ff; position: absolute; } #img1{ width: 100px; height: 100px; position: absolute; left: 300px; } </style> </head> <body> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var oImg=document.getElementById('img1'); drag(oImg); drag(oDiv); //封装 function drag(obj) { obj.onmousedown=function (ev) { var ev=ev||event; var disX=ev.clientX-this.offsetLeft; var disY=ev.clientY-this.offsetTop; //设置全局捕获 if(obj.setCapture){ obj.setCapture(); } document.onmousemove=function (ev) { //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块， // 方块就不会跟着鼠标一起移动 var ev=ev||event; obj.style.left=ev.clientX-disX+'px'; obj.style.top=ev.clientY-disY+'px'; } document.onmouseup=function () { //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块， // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是 //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document document.onmousemove=document.onmouseup=null; //释放全局捕获 if (obj.releaseCapture){ obj.releaseCapture(); } } return false; } } } </script> <div id="div1"></div> <img src="图片/7.jpg" id="img1"> </body> </html>
磁性吸附以及控制移动范围：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1{ width: 100px; height: 100px; background: #37b9ff; position: absolute; } #img1{ width: 100px; height: 100px; position: absolute; left: 300px; } </style> </head> <body> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var oImg=document.getElementById('img1'); drag(oImg); drag(oDiv); //封装 function drag(obj) { obj.onmousedown=function (ev) { var ev=ev||event; var disX=ev.clientX-this.offsetLeft; var disY=ev.clientY-this.offsetTop; //设置全局捕获 if(obj.setCapture){ obj.setCapture(); } document.onmousemove=function (ev) { //用document是因为如果是oDiv.onmousemove，鼠标移动太快，会移出方块， // 方块就不会跟着鼠标一起移动 var ev=ev||event; var L=ev.clientX-disX; var T=ev.clientY-disY;
//控制移动边缘范围 if(L<100){//磁性吸附 ------小于100px自动吸附到边缘0px L=0; }else if(L>document.documentElement.clientWidth-obj.offsetWidth){ L=document.documentElement.clientWidth-obj.offsetWidth; } if(T<0){ T=0; }else if(T>document.documentElement.clientHeight-obj.offsetHeight){ T=document.documentElement.clientHeight-obj.offsetHeight; } obj.style.left=L+'px'; obj.style.top=T+'px'; } document.onmouseup=function () { //用document是因为如果是oDiv.onmouseup,当再有一个绝对定位的方块， // 则在两个方块重叠部分放开鼠标，方块还是会跟着鼠标一起动。现象原因是 //当重叠时，鼠标点的对象会是另一个则oDiv就不起作用，所以需要变成document document.onmousemove=document.onmouseup=null; //释放全局捕获 if (obj.releaseCapture){ obj.releaseCapture(); } } return false; } } } </script> <div id="div1"></div> <img src="图片/7.jpg" id="img1"> </body> </html>