js進階 12-17 jquery實現鼠標左鍵按下拖拽功能

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>
相關文章
相關標籤/搜索