Javascript 拖拽雏形中的一些问题(逐行分析代码,(2)

<script type="text/javascript"> // 拖拽空div 低版本的火狐有bug 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; document.onmousemove = function(ev) { var oEvent = ev || event; // 存储div当前的位置 var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; // 从左边拖出去了 if (oDivLeft < 0) { oDivLeft = 0; } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) { oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth; } if (oDivTop < 0) { oDivTop = 0; } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) { oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; // 阻止默认事件,解决火狐的bug }; }; </script>

那么现在这个拖拽就比较完整啦。O(∩_∩)O

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxywy.html