利用JavaScript实现拖拽吸附效果
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; /*处理浏览器兼容问题*/ if(oDiv.setCapture) { oDiv.onmousemove=mouseMove; oDiv.onmouseup=mouseUp; oDiv.setCapture(); } else { document.onmousemove=mouseMove; document.onmouseup=mouseUp; } function mouseMove(ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) {l=0;} else if(l>(document.documentElement.clientWidth-oDiv.offsetWidth)) {l=document.documentElement.clientWidth-oDiv.offsetWidth;} if(t<0) {t=0;} else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight)) {t=(document.documentElement.clientHeight-oDiv.offsetHeight);} oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } function mouseUp() { this.onmousemove=null; this.onmouseup=null; if(this.releaseCapture) { this.releaseCapture(); } } return false; }; }; </script> </head> <body> <div id="div1"></div> </body> </html>