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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。