jquery-11 如何实现标签的鼠标拖动效果

最新推荐文章于 2025-01-20 23:42:13 发布

weixin_34409822

最新推荐文章于 2025-01-20 23:42:13 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9242692.html

本文介绍如何使用jQuery实现标签的鼠标拖动效果。通过绑定mousedown、mousemove和mouseup事件，实现标签跟随鼠标移动，并探讨return false的作用及事件对象的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery-11 如何实现标签的鼠标拖动效果

一、总结

一句话总结：核心原理：1、标签实现绝对定位，位置的话跟着鼠标走。2、点击标签的话，给标签绑定事件，停止按住鼠标的话，解除绑定的事件。

1、事件中的return false的作用是什么？

a、防止默认行为的发生
b、防止事件冒泡（一个div里面套一个img，你点click事件，先触发div的click，再穿过div触发img的click事件）

29     function start(event) {
30         deltaX=event.clientX-obj.offset().left;
31         deltaY=event.clientY-obj.offset().top;
32 
33         $(document).bind("mousemove", move);
34         $(document).bind("mouseup", stop);
35 
36         //阻止默认行为的发生
37         //阻止事件冒泡的发生
38         return false;
39     }

2、event对象如何产生和使用？

事件发生就有event对象，在事件的那个函数里面就可以使用event对象了，也可以把它作为参数传递给其它函数
传进去event对象的位置就可以return false来防止默认事情发生。

29     function start(event) {
30         deltaX=event.clientX-obj.offset().left;
31         deltaY=event.clientY-obj.offset().top;

3、如何实现标签的鼠标拖动效果？

首先给标签绑定鼠标按下事件，获取鼠标位置和标签左上角的差值，鼠标移动的时候给文档对象绑定mousemove事件，鼠标停止按动的时候就解除文档对象所有事件的绑定。

26 function drag(obj){
27     obj.bind("mousedown", start);
28 
29     function start(event) {
30         deltaX=event.clientX-obj.offset().left;
31         deltaY=event.clientY-obj.offset().top;
32 
33         $(document).bind("mousemove", move);
34         $(document).bind("mouseup", stop);
35 
36         //阻止默认行为的发生
37         //阻止事件冒泡的发生
38         return false;
39     }
40 
41     function move(event) {
42         obj.css({
43             "left":(event.clientX-deltaX)+"px",
44             "top":(event.clientY-deltaY)+"px"
45         })
46         return false;
47     }
48 
49     function stop() {
50         $(document).unbind("mousemove", move);
51         $(document).unbind("mouseup", stop);
52     }
53 }
54 
55 obj=$("#div1");
56 drag(obj);

4、js如何将标签对象传递给函数？

获取对象，然后作为参数传递给函数

55 obj=$("#div1");
56 drag(obj);

26 function drag(obj){
27     obj.bind("mousedown", start);

5、如何实现某个元素绑定某个事件的时候执行某个方法？

bind的第二个参数直接方法名，没加字符串，因为js中方法和变量只差一对括号

33         $(document).bind("mousemove", move);

41     function move(event) {
42         obj.css({
43             "left":(event.clientX-deltaX)+"px",
44             "top":(event.clientY-deltaY)+"px"
45         })
46         return false;
47     }

二、如何实现标签的鼠标拖动效果

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>index</title>
 6     <style>
 7         #div1{
 8             position: absolute;
 9             top:0px;
10             left:0px;
11             border-radius:256px;
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16         }
17     </style>
18     <script src="jquery.js"></script>
19 </head>
20 <body>
21     <div id="div1">
22          <img src="a.png">
23     </div>
24 </body>
25 <script>
26 function drag(obj){
27     obj.bind("mousedown", start);
28 
29     function start(event) {
30         deltaX=event.clientX-obj.offset().left;
31         deltaY=event.clientY-obj.offset().top;
32 
33         $(document).bind("mousemove", move);
34         $(document).bind("mouseup", stop);
35 
36         //阻止默认行为的发生
37         //阻止事件冒泡的发生
38         return false;
39     }
40 
41     function move(event) {
42         obj.css({
43             "left":(event.clientX-deltaX)+"px",
44             "top":(event.clientY-deltaY)+"px"
45         })
46         return false;
47     }
48 
49     function stop() {
50         $(document).unbind("mousemove", move);
51         $(document).unbind("mouseup", stop);
52     }
53 }
54 
55 obj=$("#div1");
56 drag(obj);
57 </script>
58 </html>