拖拽原理

来源：互联网发布：wlanapi.dll修复软件编辑：程序博客网时间：2024/05/22 00:53
 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>拖拽原理</title><style>#div1{width:100px;height:100px;background:red;position:absolute;}</style><script type="text/javascript">window.onload = function(){/*onmousedown:鼠标按下时触发onmousemove:鼠标移动时触发onmouseup:鼠标抬起时触发 */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;if(oDiv.setCapture){oDiv.setCapture();}document.onmousemove= function(ev){var ev = ev||event;oDiv.style.left= ev.clientX-disX+"px";oDiv.style.top= ev.clientY-disY+"px";}document.onmouseup = function(){document.onmousemove = null;if(oDiv.releaseCapture){oDiv.releaseCapture();}}return false;//取消浏览器默认拖拽文字行为}}/*obj.setCapture(); 设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会
监听后续发生的所有事件，当有事件发生的时候，就会被当前设置全局捕获的元素所触发。ie：有，并且有效果ff：有，但是没效果chrome:没有，会报错obj.releaseCapture()释放全局捕获 *//*拖拽的时候，如果有文字被选中，会产生问题   原因：当鼠标按下的时候（按下时触发），如果页面中有文字被选中，那么会触发浏览器的默认拖拽文字行为。   解决：     标准：阻止默认行为     非标准ie:用全局捕获 拖拽图片有问题，解决办法同上 */</script></head><body>拖拽文字在此<div id="div1"></div></body></html>


是
阅读全文
0 0