javascript，一幅图让你看懂DIV拖拽

来源：互联网发布：td-scdma是什么网络编辑：程序博客网时间：2024/06/12 01:30

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="和派孔明——前端工程师" /><meta name="copyright" content="<span style="font-family: Arial, Helvetica, sans-serif;">和派孔明——前端工程师</span><span style="font-family: Arial, Helvetica, sans-serif;">" /></span><title>DIV拖拽解析</title><style>*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}#div1{width:200px;height:200px; background:red; position:absolute;left:0;top:0;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmousedown=function(ev){var oEvt=ev||event;var disX = oEvt.clientX - oDiv.offsetLeft;var disY = oEvt.clientY - oDiv.offsetTop;document.onmousemove=function(ev){var oEvt=ev||event;oDiv.style.left=oEvt.clientX-disX+'px';oDiv.style.top=oEvt.clientY-disY+'px';};document.onmouseup=function(){document.onmousemove=null;//不要粘着我document.onmouseup=null;//性能考虑oDiv.releaseCapture && oDiv.releaseCapture();//释放截获};oDiv.setCapture && oDiv.setCapture();//事件截获return false;//阻止默认};};</script></head><body>dfasdfasdf<br><p>asdfasd234234234</p><div id="div1">asdfasdfasdf<img src="a3.png"></div></body></html>

0 0