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

时间：2023-03-09 05:00:47
jquery-11 如何实现标签的鼠标拖动效果

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     }

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

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

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         #div1{

             position: absolute;

             top:0px;

             left:0px;

             border-radius:256px;

             width:256px;

             height:256px;

             background: #ccc;

             overflow: hidden;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div id="div1">

          <img src="a.png">

     </div>

 </body>

 <script>

 function drag(obj){

     obj.bind("mousedown", start);

     function start(event) {

         deltaX=event.clientX-obj.offset().left;

         deltaY=event.clientY-obj.offset().top;

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

         $(document).bind("mouseup", stop);

         //阻止默认行为的发生

         //阻止事件冒泡的发生

         return false;

     }

     function move(event) {

         obj.css({

             "left":(event.clientX-deltaX)+"px",

             "top":(event.clientY-deltaY)+"px"

         })

         return false;

     }

     function stop() {

         $(document).unbind("mousemove", move);

         $(document).unbind("mouseup", stop);

     }

 }

 obj=$("#div1");

 drag(obj);

 </script>

 </html>

相关文章