微信扫一扫打赏支持

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

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>

 

 

 

 

 

 
posted @ 2018-07-12 16:01  范仁义  阅读(2325)  评论(0)  编辑  收藏  举报