|
1 /* |
|
2 * jQuery UI Sortable |
|
3 * |
|
4 * Copyright (c) 2008 Paul Bakaus |
|
5 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
6 * and GPL (GPL-LICENSE.txt) licenses. |
|
7 * |
|
8 * http://docs.jquery.com/UI/Sortables |
|
9 * |
|
10 * Depends: |
|
11 * ui.base.js |
|
12 * |
|
13 * Revision: $Id: ui.sortable.js 5262 2008-04-17 13:13:51Z paul.bakaus $ |
|
14 */ |
|
15 ;(function($) { |
|
16 |
|
17 if (window.Node && Node.prototype && !Node.prototype.contains) { |
|
18 Node.prototype.contains = function (arg) { |
|
19 return !!(this.compareDocumentPosition(arg) & 16); |
|
20 }; |
|
21 } |
|
22 |
|
23 |
|
24 $.widget("ui.sortableTree", $.extend($.ui.mouse, { |
|
25 init: function() { |
|
26 |
|
27 //Initialize needed constants |
|
28 var self = this, o = this.options; |
|
29 this.containerCache = {}; |
|
30 this.element.addClass("ui-sortableTree"); |
|
31 |
|
32 //Get the items |
|
33 this.refresh(); |
|
34 |
|
35 //Let's determine the parent's offset |
|
36 if(!(/(relative|absolute|fixed)/).test(this.element.css('position'))) this.element.css('position', 'relative'); |
|
37 this.offset = this.element.offset(); |
|
38 |
|
39 //Initialize mouse events for interaction |
|
40 this.mouseInit(); |
|
41 |
|
42 //Prepare cursorAt |
|
43 if(o.cursorAt && o.cursorAt.constructor == Array) |
|
44 o.cursorAt = { left: o.cursorAt[0], top: o.cursorAt[1] }; |
|
45 |
|
46 }, |
|
47 plugins: {}, |
|
48 ui: function(inst) { |
|
49 return { |
|
50 helper: (inst || this)["helper"], |
|
51 position: (inst || this)["position"].current, |
|
52 absolutePosition: (inst || this)["position"].absolute, |
|
53 instance: this, |
|
54 options: this.options, |
|
55 element: this.element, |
|
56 item: (inst || this)["currentItem"], |
|
57 sender: inst ? inst.element : null |
|
58 }; |
|
59 }, |
|
60 propagate: function(n,e,inst) { |
|
61 $.ui.plugin.call(this, n, [e, this.ui(inst)]); |
|
62 this.element.triggerHandler(n == "sort" ? n : "sort"+n, [e, this.ui(inst)], this.options[n]); |
|
63 }, |
|
64 serialize: function(o) { |
|
65 |
|
66 var items = $(this.options.items, this.element).not('.ui-sortableTree-helper'); //Only the items of the sortable itself |
|
67 var str = []; o = o || {}; |
|
68 |
|
69 items.each(function() { |
|
70 var res = ($(this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); |
|
71 if(res) str.push((o.key || res[1])+'[]='+(o.key ? res[1] : res[2])); |
|
72 }); |
|
73 |
|
74 return str.join('&'); |
|
75 |
|
76 }, |
|
77 toArray: function(attr) { |
|
78 var items = $(this.options.items, this.element).not('.ui-sortableTree-helper'); //Only the items of the sortable itself |
|
79 var ret = []; |
|
80 |
|
81 items.each(function() { ret.push($(this).attr(attr || 'id')); }); |
|
82 return ret; |
|
83 }, |
|
84 enable: function() { |
|
85 this.element.removeClass("ui-sortableTree-disabled"); |
|
86 this.options.disabled = false; |
|
87 }, |
|
88 disable: function() { |
|
89 this.element.addClass("ui-sortableTree-disabled"); |
|
90 this.options.disabled = true; |
|
91 }, |
|
92 /* Be careful with the following core functions */ |
|
93 intersectsWith: function(item) { |
|
94 |
|
95 var x1 = this.position.absolute.left - 10, x2 = x1 + 10, |
|
96 y1 = this.position.absolute.top - 10, y2 = y1 + 10; |
|
97 var l = item.left, r = l + item.width, |
|
98 t = item.top, b = t + item.height; |
|
99 |
|
100 return ( l < x1 + (this.helperProportions.width / 2) // Right Half |
|
101 && x2 - (this.helperProportions.width / 2) < r // Left Half |
|
102 && t < y1 + (this.helperProportions.height / 2) // Bottom Half |
|
103 && y2 - (this.helperProportions.height / 2) < b ); // Top Half |
|
104 |
|
105 }, |
|
106 intersectsWithEdge: function(item) { |
|
107 var y1 = this.position.absolute.top - 10, y2 = y1 + 10; |
|
108 var t = item.top, b = t + item.height; |
|
109 |
|
110 if(!this.intersectsWith(item.item.parents(".ui-sortableTree").data("sortableTree").containerCache)) return false; |
|
111 |
|
112 if (!( t < y1 + (this.helperProportions.height / 2) // Bottom Half |
|
113 && y2 - (this.helperProportions.height / 2) < b )) return false; // Top Half |
|
114 |
|
115 if(y2 > t && y1 < t) return 1; //Crosses top edge |
|
116 if(y1 < b && y2 > b) return 2; //Crosses bottom edge |
|
117 |
|
118 return false; |
|
119 |
|
120 }, |
|
121 refresh: function() { |
|
122 this.refreshItems(); |
|
123 this.refreshPositions(); |
|
124 }, |
|
125 refreshItems: function() { |
|
126 |
|
127 this.items = []; |
|
128 this.containers = [this]; |
|
129 var items = this.items; |
|
130 var queries = [$(this.options.items, this.element)]; |
|
131 |
|
132 if(this.options.connectWith) { |
|
133 for (var i = this.options.connectWith.length - 1; i >= 0; i--){ |
|
134 var cur = $(this.options.connectWith[i]); |
|
135 for (var j = cur.length - 1; j >= 0; j--){ |
|
136 var inst = $.data(cur[j], 'sortableTree'); |
|
137 if(inst && !inst.options.disabled) { |
|
138 queries.push($(inst.options.items, inst.element)); |
|
139 this.containers.push(inst); |
|
140 } |
|
141 }; |
|
142 }; |
|
143 } |
|
144 |
|
145 for (var i = queries.length - 1; i >= 0; i--){ |
|
146 queries[i].each(function() { |
|
147 $.data(this, 'sortableTree-item', true); // Data for target checking (mouse manager) |
|
148 items.push({ |
|
149 item: $(this), |
|
150 width: 0, height: 0, |
|
151 left: 0, top: 0 |
|
152 }); |
|
153 }); |
|
154 }; |
|
155 |
|
156 }, |
|
157 refreshPositions: function(fast) { |
|
158 for (var i = this.items.length - 1; i >= 0; i--){ |
|
159 if(!fast) this.items[i].height = this.items[i].item.outerHeight(); |
|
160 this.items[i].top = this.items[i].item.offset().top; |
|
161 }; |
|
162 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
163 var p =this.containers[i].element.offset(); |
|
164 this.containers[i].containerCache.left = p.left; |
|
165 this.containers[i].containerCache.top = p.top; |
|
166 this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); |
|
167 this.containers[i].containerCache.height= this.containers[i].element.outerHeight(); |
|
168 }; |
|
169 }, |
|
170 destroy: function() { |
|
171 |
|
172 this.element |
|
173 .removeClass("ui-sortableTree ui-sortableTree-disabled") |
|
174 .removeData("sortableTree") |
|
175 .unbind(".sortableTree"); |
|
176 this.mouseDestroy(); |
|
177 |
|
178 for ( var i = this.items.length - 1; i >= 0; i-- ) |
|
179 this.items[i].item.removeData("sortableTree-item"); |
|
180 |
|
181 }, |
|
182 contactContainers: function(e) { |
|
183 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
184 |
|
185 if(this.intersectsWith(this.containers[i].containerCache)) { |
|
186 if(!this.containers[i].containerCache.over) { |
|
187 |
|
188 if(this.currentContainer != this.containers[i]) { |
|
189 |
|
190 //When entering a new container, we will find the item with the least distance and append our item near it |
|
191 var dist = 10000; var itemWithLeastDistance = null; var base = this.position.absolute.top; |
|
192 for (var j = this.items.length - 1; j >= 0; j--) { |
|
193 if(!this.containers[i].element[0].contains(this.items[j].item[0])) continue; |
|
194 var cur = this.items[j].top; |
|
195 if(Math.abs(cur - base) < dist) { |
|
196 dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; |
|
197 } |
|
198 } |
|
199 |
|
200 itemWithLeastDistance ? this.rearrange(e, itemWithLeastDistance) : this.rearrange(e, null, this.containers[i].element); |
|
201 this.propagate("change", e); //Call plugins and callbacks |
|
202 this.containers[i].propagate("change", e, this); //Call plugins and callbacks |
|
203 this.currentContainer = this.containers[i]; |
|
204 |
|
205 } |
|
206 |
|
207 this.containers[i].propagate("over", e, this); |
|
208 this.containers[i].containerCache.over = 1; |
|
209 } |
|
210 } else { |
|
211 if(this.containers[i].containerCache.over) { |
|
212 this.containers[i].propagate("out", e, this); |
|
213 this.containers[i].containerCache.over = 0; |
|
214 } |
|
215 } |
|
216 |
|
217 }; |
|
218 }, |
|
219 mouseStart: function(e,el) { |
|
220 |
|
221 if(this.options.disabled || this.options.type == 'static') return false; |
|
222 |
|
223 //Find out if the clicked node (or one of its parents) is a actual item in this.items |
|
224 var currentItem = null, nodes = $(e.target).parents().each(function() { |
|
225 if($.data(this, 'sortableTree-item')) { |
|
226 currentItem = $(this); |
|
227 return false; |
|
228 } |
|
229 }); |
|
230 if($.data(e.target, 'sortableTree-item')) currentItem = $(e.target); |
|
231 |
|
232 if(!currentItem) return false; |
|
233 if(this.options.handle) { |
|
234 var validHandle = false; |
|
235 $(this.options.handle, currentItem).each(function() { if(this == e.target) validHandle = true; }); |
|
236 if(!validHandle) return false; |
|
237 } |
|
238 |
|
239 this.currentItem = currentItem; |
|
240 |
|
241 var o = this.options; |
|
242 this.currentContainer = this; |
|
243 this.refresh(); |
|
244 |
|
245 //Create and append the visible helper |
|
246 this.helper = typeof o.helper == 'function' ? $(o.helper.apply(this.element[0], [e, this.currentItem])) : this.currentItem.clone(); |
|
247 if(!this.helper.parents('body').length) this.helper.appendTo("body"); //Add the helper to the DOM if that didn't happen already |
|
248 this.helper.css({ position: 'absolute', clear: 'both' }).addClass('ui-sortableTree-helper'); //Position it absolutely and add a helper class |
|
249 |
|
250 //Prepare variables for position generation |
|
251 $.extend(this, { |
|
252 offsetParent: this.helper.offsetParent(), |
|
253 offsets: { absolute: this.currentItem.offset() } |
|
254 }); |
|
255 |
|
256 //Save the first time position |
|
257 $.extend(this, { |
|
258 position: { |
|
259 current: { left: e.pageX, top: e.pageY }, |
|
260 absolute: { left: e.pageX, top: e.pageY }, |
|
261 dom: this.currentItem.prev()[0] |
|
262 }, |
|
263 clickOffset: { left: -5, top: -5 } |
|
264 }); |
|
265 |
|
266 this.propagate("start", e); //Call plugins and callbacks |
|
267 this.helperProportions = { width: this.helper.outerWidth(), height: this.helper.outerHeight() }; //Save and store the helper proportions |
|
268 |
|
269 for (var i = this.containers.length - 1; i >= 0; i--) { |
|
270 this.containers[i].propagate("activate", e, this); |
|
271 } //Post 'activate' events to possible containers |
|
272 |
|
273 //Prepare possible droppables |
|
274 if($.ui.ddmanager) $.ui.ddmanager.current = this; |
|
275 if ($.ui.ddmanager && !o.dropBehaviour) $.ui.ddmanager.prepareOffsets(this, e); |
|
276 |
|
277 this.dragging = true; |
|
278 return true; |
|
279 |
|
280 }, |
|
281 mouseStop: function(e) { |
|
282 |
|
283 if(this.newPositionAt) this.options.sortIndication.remove.call(this.currentItem, this.newPositionAt); //remove sort indicator |
|
284 this.propagate("stop", e); //Call plugins and trigger callbacks |
|
285 |
|
286 //If we are using droppables, inform the manager about the drop |
|
287 var dropped = ($.ui.ddmanager && !this.options.dropBehaviour) ? $.ui.ddmanager.drop(this, e) : false; |
|
288 if(!dropped && this.newPositionAt) this.newPositionAt[this.direction == 'down' ? 'before' : 'after'](this.currentItem); //Append to element to its new position |
|
289 |
|
290 if(this.position.dom != this.currentItem.prev()[0]) this.propagate("update", e); //Trigger update callback if the DOM position has changed |
|
291 if(!this.element[0].contains(this.currentItem[0])) { //Node was moved out of the current element |
|
292 this.propagate("remove", e); |
|
293 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
294 if(this.containers[i].element[0].contains(this.currentItem[0])) { |
|
295 this.containers[i].propagate("update", e, this); |
|
296 this.containers[i].propagate("receive", e, this); |
|
297 } |
|
298 }; |
|
299 }; |
|
300 |
|
301 //Post events to containers |
|
302 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
303 this.containers[i].propagate("deactivate", e, this); |
|
304 if(this.containers[i].containerCache.over) { |
|
305 this.containers[i].propagate("out", e, this); |
|
306 this.containers[i].containerCache.over = 0; |
|
307 } |
|
308 } |
|
309 |
|
310 this.dragging = false; |
|
311 if(this.cancelHelperRemoval) return false; |
|
312 this.helper.remove(); |
|
313 |
|
314 return false; |
|
315 |
|
316 }, |
|
317 mouseDrag: function(e) { |
|
318 |
|
319 //Compute the helpers position |
|
320 this.position.current = { top: e.pageY + 5, left: e.pageX + 5 }; |
|
321 this.position.absolute = { left: e.pageX + 5, top: e.pageY + 5 }; |
|
322 |
|
323 //Interconnect with droppables |
|
324 if($.ui.ddmanager) $.ui.ddmanager.drag(this, e); |
|
325 var intersectsWithDroppable = false; |
|
326 $.each($.ui.ddmanager.droppables, function() { |
|
327 if(this.isover) intersectsWithDroppable = true; |
|
328 }); |
|
329 |
|
330 //Rearrange |
|
331 if(intersectsWithDroppable) { |
|
332 if(this.newPositionAt) this.options.sortIndication.remove.call(this.currentItem, this.newPositionAt); |
|
333 } else { |
|
334 for (var i = this.items.length - 1; i >= 0; i--) { |
|
335 |
|
336 if(this.currentItem[0].contains(this.items[i].item[0])) continue; |
|
337 |
|
338 var intersection = this.intersectsWithEdge(this.items[i]); |
|
339 if(!intersection) continue; |
|
340 |
|
341 this.direction = intersection == 1 ? "down" : "up"; |
|
342 this.rearrange(e, this.items[i]); |
|
343 this.propagate("change", e); //Call plugins and callbacks |
|
344 break; |
|
345 } |
|
346 } |
|
347 |
|
348 //Post events to containers |
|
349 this.contactContainers(e); |
|
350 |
|
351 this.propagate("sort", e); //Call plugins and callbacks |
|
352 this.helper.css({ left: this.position.current.left+'px', top: this.position.current.top+'px' }); // Stick the helper to the cursor |
|
353 return false; |
|
354 |
|
355 }, |
|
356 rearrange: function(e, i, a) { |
|
357 if(i) { |
|
358 if(this.newPositionAt) this.options.sortIndication.remove.call(this.currentItem, this.newPositionAt); |
|
359 this.newPositionAt = i.item; |
|
360 this.options.sortIndication[this.direction].call(this.currentItem, this.newPositionAt); |
|
361 } else { |
|
362 //Append |
|
363 } |
|
364 } |
|
365 })); |
|
366 |
|
367 $.extend($.ui.sortableTree, { |
|
368 defaults: { |
|
369 items: '> *', |
|
370 zIndex: 1000, |
|
371 distance: 1 |
|
372 }, |
|
373 getter: "serialize toArray" |
|
374 }); |
|
375 |
|
376 |
|
377 |
|
378 })(jQuery); |