您的位置：首页 > Web前端 > JavaScript

JS简易拖拽效果

2020-02-16 17:52 399 查看

原理：注册mousemove事件，使元素跟随鼠标挪动；注册mouseup事件，移除mousemove事件，使得松开鼠标时元素不再跟随移动，能够固定在指定位置。在mousedown事件中注册mousemove事件和mouseup事件，这样便可完成一次完整的拖拽。 

重点：IE中setCapture()的应用。它的作用是捕捉所有的MouseEvent，设置完成后，即使鼠标移出窗口注册的鼠标事件仍然能够被触发。它在此处的作用是当鼠标移动过快越出元素的边界使得原本将要失效的mousemove事件依然能够发挥作用。在ff和chrome中，由于没有对应的设置，可以把mousemove和mouseup事件指定到docuemnt对象上，这样不管鼠标怎么移动，都在document上；其实在ie上这么写也行，那就不用设置setCapture()了，它和设置了的相比唯一的区别是当元素向右移出窗口边界时，元素始终保持在可视范围内。 

Js代码  
  1. <!docType html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. #drag {border:1px solid blue;width:100px;height:100px;position:absolute;}  
  6. </style>  
  7. </head>  
  8. <body>  
  9. <input id="x"  />  
  10. <input id="y"  />  
  11. <div id="drag"></div>  
  12.   
  13. <script><!--  
  14. var drag = document.getElementById('drag');  
  15. var inputX = document.getElementById('x');  
  16. var inputY = document.getElementById('y');  
  17. if(document.attachEvent){  
  18. drag.attachEvent('onmousedown',dragHandle);  
  19. }else{  
  20. drag.addEventListener('mousedown', dragHandle,false);  
  21. }  
  22. function dragHandle(event){  
  23.     var event = event||window.event;  
  24.     var startX = drag.offsetLeft;  
  25.     var startY = drag.offsetTop;  
  26.     var mouseX = event.clientX;  
  27.     var mouseY = event.clientY;  
  28.     var deltaX = mouseX - startX;  
  29.     var deltaY = mouseY - startY;  
  30.     if(document.attachEvent){  
  31.         drag.attachEvent('onmousemove',moveHandle);  
  32.         drag.attachEvent('onmouseup',upHandle);  
  33.         drag.attachEvent('onlosecapture',upHandle);  
  34.         drag.setCapture();  
  35.     }else{  
  36.         document.addEventListener('mousemove',moveHandle,true);  
  37.         document.addEventListener('mouseup',upHandle,true);  
  38.     }  
  39.     function moveHandle(event){  
  40.         var event = event||window.event;  
  41.         drag.style.left = (event.clientX - deltaX)+"px";  
  42.         drag.style.top = (event.clientY - deltaY)+"px";  
  43.         inputX.value=drag.style.left;  
  44.         inputY.value=drag.style.top;  
  45.     }  
  46.     function upHandle(){  
  47.         if(document.attachEvent){  
  48.             drag.detachEvent('onmousemove',moveHandle);  
  49.             drag.detachEvent('onmouseup',upHandle);  
  50.             drag.detachEvent('onlosecapture',upHandle);  
  51.             drag.releaseCapture();  
  52.         }else{  
  53.             document.removeEventListener('mousemove',moveHandle,true);  
  54.             document.removeEventListener('mouseup',upHandle,true);  
  55.         }  
  56.     }  
  57.   
  58. }  
  59. //--</script>  
  60. </body>  
  61. </html>  

转载于:https://www.cnblogs.com/wsir/p/5855832.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
baitao1932 发布了0 篇原创文章 · 获赞 0 · 访问量 211 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航