基于jquery的一个 拖拽到指定区域内的效果。

这两天一直在整这个拖拽的效果,既然学习就要把一个特效的各个方面考虑周全,这样才学到真正的知识。可不,又整理了一个 拖拽的特效。

这个可与前两个不同了,这个是拖拽到指定的区域内的特效。其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素

具体的代码如下,有兴趣者可以试下。(由于是初学,做的简单,请大侠指点一二。。。)

  1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>测试的拖拽功能</title>
6 <style type="text/css">
7 body, div { margin: 0; paading: 0; font-size: 12px; }
8 ul, li { margin: 0; padding: 0; list-style: none; }
9 .clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
10 .bor2 { padding: 20px 0 0 0; }
11 .box { position: static; float: left; width: 200px; height: 800px; margin: 0 auto; margin-top: 15px; }
12
13 .bor { position: static; width: 100px; height: 100px; margin: 0 0 5px 0 ; border: 1px solid #ccc; background: #ececec; }
14 .borp { position: absolute; width: 100px; height: 80px; margin: 10px; padding: 10px; border: 1px solid #ccc; background: #ececec; }
15
16 .bg { float:left; width: 100px; height: 100px; margin: 8px 5px 0 auto; padding: 10px; border: 1px solid #ccc; }
17 .text2 { width: 200px; }
18 .bgColor { border: 1px dashed #f00; }
19
20 </style>
21 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
22 <script type="text/javascript">
23
24 $(document).ready(function() {
25 var move = false; // 移动的初始化
26 var $bg = $(".bg");
27 var initDiv, tarDiv, tarDivHalf = 0, wHalf = 0; //拖拽对象 目标对象
28 var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, temPos = {x: 0, y: 0};
29 var dragPos = {x1: 0, x2: 0, y1: 0, y2: 0}; // 拖拽对象的四个坐标
30 var tarDivPos = {x1: 0, y1: 0, x2: 0, y2: 0}; //目标对象的四个坐标
31
32 //$(".bor").each(function() { 用each 会导致性能下降,所以IE会出现拖拽对象 随鼠标移动时 慢了半拍的现象
33 $(".bor").bind('mousedown', function(event) {
34
35 borSub = $(this).index();
36 initDiv = $(".bor").eq(borSub); //拖拽对象
37
38 // 鼠标 与 目标元素的相对坐标
39 relPos.x = event.pageX - $(this).offset().left;
40 relPos.y = event.pageY - $(this).offset().top;
41
42 move = true;
43 });
44
45 $(document).mousemove(function(event) {
46
47 if (!move) { return false; }
48 // 下列代码是 if(move)的 程序
49 initDiv.removeClass("bor").addClass("borp");
50 // 目标元素随鼠标移动的坐标
51 dragPos.x1 = event.pageX - relPos.x;
52 dragPos.y1 = event.pageY - relPos.y;
53 dragPos.x2 = dragPos.x1 + initDiv. innerWidth();
54 dragPos.y2 = dragPos.y1 + initDiv. innerHeight();
55
56 initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' });
57
58 $bg.each(function() {
59 tarDiv = $(this);
60 // 目标对象的坐标
61 tarDivPos.x1 = tarDiv.offset().left;
62 tarDivPos.x2 = tarDivPos.x1 + tarDiv.width();
63 tarDivPos.y1 = tarDiv.offset().top;
64 tarDivPos.y2 = tarDivPos.y1 + tarDiv.height();
65
66 tarDivHalf = tarDiv.height()/2; //临时变量,用于在if判断中使用
67 wHalf = tarDiv.width()/2;
68
69 if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf) {
70 if(tarDiv.children().length >0 ) {return false;}// 解决重叠元素 移动到一个目标元素
71 tarDiv.removeClass("bg").addClass("bg bgColor");
72 } else {
73 tarDiv.removeClass("bgColor");
74 }
75 });
76
77 }).mouseup (function(event) {
78 initDiv.appendTo($(".bgColor"));// 用 apppendTo 方法 使拖动元素对象添加到指定的区域。
79 initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢复拖拽对象初始的样式
80 move = false;
81 });
82
83 });
84
85 </script>
86 </head>
87
88 <body>
89
90 <div class="box">
91 <div class="bor">bor1</div>
92 <div class="bor">bor2</div>
93 <div class="bor">bor3</div>
94 </div>
95
96 <div class="box2">
97 <div class="bg" id="bg1"></div>
98 <div class="bg" id="bg2"></div>
99 <div class="bg" id="bg3"></div>
100 <div class="bg" id="bg4"></div>
101 <div class="bg" id="bg5"></div>
102 <div class="bg" id="bg6"></div>
103 <div class="bg" id="bg7"></div>
104 <div class="bg" id="bg8"></div>
105 <div class="bg" id="bg9"></div>
106 <div class="bg" id="bg10"></div>
107 <div class="bg" id="bg11"></div>
108 <div class="bg" id="bg12"></div>
109 <div class="bg" id="bg13"></div>
110 <div class="bg" id="bg14"></div>
111 <div class="bg" id="bg15"></div>
112 <div class="bg" id="bg16"></div>
113 <div class="bg" id="bg17"></div>
114 <div class="bg" id="bg18"></div>
115 <div class="bg" id="bg19"></div>
116 <div class="bg" id="bg20"></div>
117 <div class="bg" id="bg21"></div>
118 <div class="bg" id="bg22"></div>
119 <div class="bg" id="bg23"></div>
120 <div class="bg" id="bg24"></div>
121 <div class="bg" id="bg25"></div>
122 <div class="bg" id="bg26"></div>
123 <div class="bg" id="bg27"></div>
124 <div class="bg" id="bg28"></div>
125 <div class="bg" id="bg29"></div>
126 <div class="bg" id="bg30"></div>
127 <div class="bg" id="bg31"></div>
128 <div class="bg" id="bg32"></div>
129 <div class="bg" id="bg33"></div>
130 <div class="bg" id="bg34"></div>
131 <div class="bg" id="bg35"></div>
132 <div class="bg" id="bg36"></div>
133 <div class="bg" id="bg37"></div>
134 <div class="bg" id="bg38"></div>
135 <div class="bg" id="bg39"></div>
136
137 </div>
138 <div class="clear"></div>
139
140 </body>
141 </html>




你可能感兴趣的:(jquery)