由於這樣必須選中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 })
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 })
再添加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>
案例描述:實現一個簡單的拖拽元素的功能.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>