js进阶 12-17 jquery实现鼠标左键按下拖拽功能

时间 2020-05-31

原文原文链接

js进阶 12-17 jquery实现鼠标左键按下拖拽功能

1、总结

一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX和pageY。

一、为何直接给div加mousemove不行？

由于这样必须选中div才能移动，并且移动的快了鼠标就脱离div了，就移不动了javascript

19  $(document).mousemove(function(e){ 20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  }) 24  })

二、要想实现全局拖动须要监听的事件对象是谁？

documentcss

19  $(document).mousemove(function(e){ 20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  }) 24  })

三、事件拖动的话div的位置坐标应该是什么？

pageX和pageYhtml

20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  })

四、如何实现鼠标左键点击的时候才触发拖动效果？

给document添加mousedown事件java

18  $(document).mousedown(function(){ 19  $(document).mousemove(function(e){ 20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  }) 24  })

五、只添加mousedown事件或鼠标点击的确是跟着动，鼠标松开也仍是跟着动，咱们如何解决这个问题？

再添加mouseup事件解决鼠标的松开的div还跟着动的问题jquery

16 <script> 17  $(function(){ 18  $(document).mousedown(function(){ 19  $(document).mousemove(function(e){ 20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  }) 24  }) 25  $(document).mouseup(function(){ 26  $(document).off('mousemove') 27  }) 28  }) 29 30  }) 31 </script>

2、jquery实现拖拽功能

一、相关知识

拖拽功能

案例描述：实现一个简单的拖拽元素的功能.spa

案例重点：该案例自己很是简单，可是综合运用了键盘事件和事件对象。code

二、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10  div{width: 100px;height: 100px;border-radius: 50px;background: orange;position: absolute;}
11     </style>
12 </style>
13 </head>
14 <body>
15     <div id="div1"></div>
16     <script>
17  $(function(){ 18  $(document).mousedown(function(){ 19  $(document).mousemove(function(e){ 20  $('#div1').offset({ 21  left:e.pageX, 22  top:e.pageY 23  }) 24  }) 25  $(document).mouseup(function(){ 26  $(document).off('mousemove') 27  }) 28  }) 29             
30  }) 31     </script>
32 </body>
33 </html>