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

最新推荐文章于 2024-05-13 15:06:53 发布

weixin_33862993

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量665

点赞数

文章标签： javascript ViewUI

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>

weixin_33862993

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js进阶 12-17 jquery实现鼠标左键按下拖拽功能

js进阶 12-17 jquery实现鼠标左键按下拖拽功能一、总结一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX和pageY。 1、为什么直接给div加mousemove不行？因为这样必须选中div才能移动，而且移动的快了鼠标就脱离div了，就移不动了19 ...
复制链接

扫一扫