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>
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
