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>  
  • 相关阅读:
    falsh developer 快捷键
    FlashDevelop安装配置
    EditPlus保存时不生成bak文件（转）
    微信oauth2验证
    通过TortoiseSVN checkout的文件前面没有“状态标识”
    CSS3 Media Query 响应式媒体查询
    回车事件、键盘事件
    shiro登录密码加密
    mybatis常用类起别名
    shiro(四)项目开发中的配置、
  • 原文地址：https://www.cnblogs.com/wsir/p/5855832.html
Copyright © 2011-2022 走看看