zoukankan      html  css  js  c++  java

  • 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;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获取四位年份和2位年份
    notebook 快捷键
    发表文章不需要版面费的期刊
    命题演算、集合论和布尔代数之间的关系是什么？
    炒作套路
    如何理解佛经中“黄叶止啼”的故事
    期货之为什么要注册仓单！逼空是什么鬼！
    反证法与归谬法的区别
    感恩的含义！告诉你什么是感？什么是恩？人生必读！
    悖论的本质
  • 原文地址：https://www.cnblogs.com/wsir/p/5855832.html
Copyright © 2011-2022 走看看