JS简易拖拽效果

Posted keep

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS简易拖拽效果相关的知识，希望对你有一定的参考价值。

原理：注册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>  

以上是关于JS简易拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章

案例：简易的Div拖拽

JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]

10分钟实现简易Vue拖拽排序

10分钟实现简易Vue拖拽排序

10分钟实现简易Vue拖拽排序

利用css+原生js制作简易钟表