js進階 12-17 jquery實現鼠標左鍵按下拖拽功能
一、總結
一句話總結：監聽的對象必須是文檔，鼠標按下運行mousemove事件，鼠標松開取消mousemove事件的綁定，div的偏移的話是pageX和pageY。
1、為什么直接給div加mousemove不行？
因為這樣必須選中div才能移動，而且移動的快了鼠標就脫離div了，就移不動了
19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })
2、要想實現全局拖動需要監聽的事件對象是誰？
document
19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })
3、事件拖動的話div的位置坐標應該是什么？
pageX和pageY
20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 })
4、如何實現鼠標左鍵點擊的時候才觸發拖動效果？
給document添加mousedown事件
18 $(document).mousedown(function(){ 19 $(document).mousemove(function(e){ 20 $('#div1').offset({ 21 left:e.pageX, 22 top:e.pageY 23 }) 24 })
5、只添加mousedown事件或鼠標點擊的確是跟着動，鼠標松開也還是跟着動，我們如何解決這個問題？
再添加mouseup事件解決鼠標的松開的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>
二、jquery實現拖拽功能
1、相關知識
拖拽功能
案例描述：實現一個簡單的拖拽元素的功能.
案例重點：該案例本身非常簡單，但是綜合運用了鍵盤事件和事件對象。
2、代碼
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>