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>  
  • 相关阅读:
    Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理
    Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析
    Java生鲜电商平台-秒杀系统微服务架构设计与源码解析实战
    超硬核Java学习路线图+学习资源+实战项目汇总,看完以后不用再问我怎么学Java了!
    还没使用过消息队列?这一份书单值得你好好看看!
    学习Spring,看这几本书就够了
    这份书单,想要晋级高级Java工程师的朋友值得一看!
    搞定JVM基本原理和面试题,看看这几本书妥妥够了!
    《自拍教程16》cmd的常用技巧
    《自拍教程15》命令行软件的通用技巧
  • 原文地址:https://www.cnblogs.com/wsir/p/5855832.html
Copyright © 2011-2022 走看看