|
1 /* |
|
2 * jQuery UI Sortable 1.6 |
|
3 * |
|
4 * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.com/about) |
|
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.core.js |
|
12 */ |
|
13 (function($) { |
|
14 |
|
15 $.widget("ui.sortable", $.extend({}, $.ui.mouse, { |
|
16 _init: function() { |
|
17 |
|
18 var o = this.options; |
|
19 this.containerCache = {}; |
|
20 this.element.addClass("ui-sortable"); |
|
21 |
|
22 //Get the items |
|
23 this.refresh(); |
|
24 |
|
25 //Let's determine if the items are floating |
|
26 this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false; |
|
27 |
|
28 //Let's determine the parent's offset |
|
29 this.offset = this.element.offset(); |
|
30 |
|
31 //Initialize mouse events for interaction |
|
32 this._mouseInit(); |
|
33 |
|
34 }, |
|
35 |
|
36 destroy: function() { |
|
37 this.element |
|
38 .removeClass("ui-sortable ui-sortable-disabled") |
|
39 .removeData("sortable") |
|
40 .unbind(".sortable"); |
|
41 this._mouseDestroy(); |
|
42 |
|
43 for ( var i = this.items.length - 1; i >= 0; i-- ) |
|
44 this.items[i].item.removeData("sortable-item"); |
|
45 }, |
|
46 |
|
47 _mouseCapture: function(event, overrideHandle) { |
|
48 |
|
49 if (this.reverting) { |
|
50 return false; |
|
51 } |
|
52 |
|
53 if(this.options.disabled || this.options.type == 'static') return false; |
|
54 |
|
55 //We have to refresh the items data once first |
|
56 this._refreshItems(event); |
|
57 |
|
58 //Find out if the clicked node (or one of its parents) is a actual item in this.items |
|
59 var currentItem = null, self = this, nodes = $(event.target).parents().each(function() { |
|
60 if($.data(this, 'sortable-item') == self) { |
|
61 currentItem = $(this); |
|
62 return false; |
|
63 } |
|
64 }); |
|
65 if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target); |
|
66 |
|
67 if(!currentItem) return false; |
|
68 if(this.options.handle && !overrideHandle) { |
|
69 var validHandle = false; |
|
70 |
|
71 $(this.options.handle, currentItem).find("*").andSelf().each(function() { if(this == event.target) validHandle = true; }); |
|
72 if(!validHandle) return false; |
|
73 } |
|
74 |
|
75 this.currentItem = currentItem; |
|
76 this._removeCurrentsFromItems(); |
|
77 return true; |
|
78 |
|
79 }, |
|
80 |
|
81 _mouseStart: function(event, overrideHandle, noActivation) { |
|
82 |
|
83 var o = this.options; |
|
84 this.currentContainer = this; |
|
85 |
|
86 //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture |
|
87 this.refreshPositions(); |
|
88 |
|
89 //Create and append the visible helper |
|
90 this.helper = this._createHelper(event); |
|
91 |
|
92 //Cache the helper size |
|
93 this._cacheHelperProportions(); |
|
94 |
|
95 /* |
|
96 * - Position generation - |
|
97 * This block generates everything position related - it's the core of draggables. |
|
98 */ |
|
99 |
|
100 //Cache the margins of the original element |
|
101 this._cacheMargins(); |
|
102 |
|
103 //Get the next scrolling parent |
|
104 this.scrollParent = this.helper.scrollParent(); |
|
105 |
|
106 //The element's absolute position on the page minus margins |
|
107 this.offset = this.currentItem.offset(); |
|
108 |
|
109 this.offset = { |
|
110 top: this.offset.top - this.margins.top, |
|
111 left: this.offset.left - this.margins.left |
|
112 }; |
|
113 |
|
114 // Only after we got the offset, we can change the helper's position to absolute |
|
115 // TODO: Still need to figure out a way to make relative sorting possible |
|
116 this.helper.css("position", "absolute"); |
|
117 this.cssPosition = this.helper.css("position"); |
|
118 |
|
119 $.extend(this.offset, { |
|
120 click: { //Where the click happened, relative to the element |
|
121 left: event.pageX - this.offset.left, |
|
122 top: event.pageY - this.offset.top |
|
123 }, |
|
124 parent: this._getParentOffset(), |
|
125 relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper |
|
126 }); |
|
127 |
|
128 //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied |
|
129 if(o.cursorAt) |
|
130 this._adjustOffsetFromHelper(o.cursorAt); |
|
131 |
|
132 //Generate the original position |
|
133 this.originalPosition = this._generatePosition(event); |
|
134 |
|
135 //Cache the former DOM position |
|
136 this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] }; |
|
137 |
|
138 //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way |
|
139 if(this.helper[0] != this.currentItem[0]) { |
|
140 this.currentItem.hide(); |
|
141 } |
|
142 |
|
143 //Create the placeholder |
|
144 this._createPlaceholder(); |
|
145 |
|
146 //Set a containment if given in the options |
|
147 if(o.containment) |
|
148 this._setContainment(); |
|
149 |
|
150 //Call plugins and callbacks |
|
151 this._propagate("start", event); |
|
152 |
|
153 //Recache the helper size |
|
154 if(!this._preserveHelperProportions) |
|
155 this._cacheHelperProportions(); |
|
156 |
|
157 |
|
158 //Post 'activate' events to possible containers |
|
159 if(!noActivation) { |
|
160 for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._propagate("activate", event, this); } |
|
161 } |
|
162 |
|
163 //Prepare possible droppables |
|
164 if($.ui.ddmanager) |
|
165 $.ui.ddmanager.current = this; |
|
166 |
|
167 if ($.ui.ddmanager && !o.dropBehaviour) |
|
168 $.ui.ddmanager.prepareOffsets(this, event); |
|
169 |
|
170 this.dragging = true; |
|
171 |
|
172 this.helper.addClass('ui-sortable-helper'); |
|
173 this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position |
|
174 return true; |
|
175 |
|
176 }, |
|
177 |
|
178 _mouseDrag: function(event) { |
|
179 |
|
180 //Compute the helpers position |
|
181 this.position = this._generatePosition(event); |
|
182 this.positionAbs = this._convertPositionTo("absolute"); |
|
183 |
|
184 if (!this.lastPositionAbs) { |
|
185 this.lastPositionAbs = this.positionAbs; |
|
186 } |
|
187 |
|
188 //Call the internal plugins |
|
189 $.ui.plugin.call(this, "sort", [event, this._ui()]); |
|
190 |
|
191 //Regenerate the absolute position used for position checks |
|
192 this.positionAbs = this._convertPositionTo("absolute"); |
|
193 |
|
194 //Set the helper position |
|
195 if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px'; |
|
196 if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px'; |
|
197 |
|
198 //Rearrange |
|
199 for (var i = this.items.length - 1; i >= 0; i--) { |
|
200 |
|
201 //Cache variables and intersection, continue if no intersection |
|
202 var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item); |
|
203 if (!intersection) continue; |
|
204 |
|
205 if(itemElement != this.currentItem[0] //cannot intersect with itself |
|
206 && this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before |
|
207 && !$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked |
|
208 && (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true) |
|
209 ) { |
|
210 |
|
211 this.direction = intersection == 1 ? "down" : "up"; |
|
212 |
|
213 if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) { |
|
214 this.options.sortIndicator.call(this, event, item); |
|
215 } else { |
|
216 break; |
|
217 } |
|
218 |
|
219 this._propagate("change", event); //Call plugins and callbacks |
|
220 break; |
|
221 } |
|
222 } |
|
223 |
|
224 //Post events to containers |
|
225 this._contactContainers(event); |
|
226 |
|
227 //Interconnect with droppables |
|
228 if($.ui.ddmanager) $.ui.ddmanager.drag(this, event); |
|
229 |
|
230 //Call callbacks |
|
231 this._trigger('sort', event, this._ui()); |
|
232 |
|
233 this.lastPositionAbs = this.positionAbs; |
|
234 return false; |
|
235 |
|
236 }, |
|
237 |
|
238 _mouseStop: function(event, noPropagation) { |
|
239 |
|
240 if(!event) return; |
|
241 |
|
242 //If we are using droppables, inform the manager about the drop |
|
243 if ($.ui.ddmanager && !this.options.dropBehaviour) |
|
244 $.ui.ddmanager.drop(this, event); |
|
245 |
|
246 if(this.options.revert) { |
|
247 var self = this; |
|
248 var cur = self.placeholder.offset(); |
|
249 |
|
250 self.reverting = true; |
|
251 |
|
252 $(this.helper).animate({ |
|
253 left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft), |
|
254 top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop) |
|
255 }, parseInt(this.options.revert, 10) || 500, function() { |
|
256 self._clear(event); |
|
257 }); |
|
258 } else { |
|
259 this._clear(event, noPropagation); |
|
260 } |
|
261 |
|
262 return false; |
|
263 |
|
264 }, |
|
265 |
|
266 cancel: function() { |
|
267 |
|
268 if(this.dragging) { |
|
269 |
|
270 this._mouseUp(); |
|
271 |
|
272 if(this.options.helper == "original") |
|
273 this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); |
|
274 else |
|
275 this.currentItem.show(); |
|
276 |
|
277 //Post deactivating events to containers |
|
278 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
279 this.containers[i]._propagate("deactivate", null, this); |
|
280 if(this.containers[i].containerCache.over) { |
|
281 this.containers[i]._propagate("out", null, this); |
|
282 this.containers[i].containerCache.over = 0; |
|
283 } |
|
284 } |
|
285 |
|
286 } |
|
287 |
|
288 //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! |
|
289 if(this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]); |
|
290 if(this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove(); |
|
291 |
|
292 $.extend(this, { |
|
293 helper: null, |
|
294 dragging: false, |
|
295 reverting: false, |
|
296 _noFinalSort: null |
|
297 }); |
|
298 |
|
299 if(this.domPosition.prev) { |
|
300 $(this.domPosition.prev).after(this.currentItem); |
|
301 } else { |
|
302 $(this.domPosition.parent).prepend(this.currentItem); |
|
303 } |
|
304 |
|
305 return true; |
|
306 |
|
307 }, |
|
308 |
|
309 serialize: function(o) { |
|
310 |
|
311 var items = this._getItemsAsjQuery(o && o.connected); |
|
312 var str = []; o = o || {}; |
|
313 |
|
314 $(items).each(function() { |
|
315 var res = ($(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); |
|
316 if(res) str.push((o.key || res[1]+'[]')+'='+(o.key && o.expression ? res[1] : res[2])); |
|
317 }); |
|
318 |
|
319 return str.join('&'); |
|
320 |
|
321 }, |
|
322 |
|
323 toArray: function(o) { |
|
324 |
|
325 var items = this._getItemsAsjQuery(o && o.connected); |
|
326 var ret = []; o = o || {}; |
|
327 |
|
328 items.each(function() { ret.push($(o.item || this).attr(o.attribute || 'id') || ''); }); |
|
329 return ret; |
|
330 |
|
331 }, |
|
332 |
|
333 /* Be careful with the following core functions */ |
|
334 _intersectsWith: function(item) { |
|
335 |
|
336 var x1 = this.positionAbs.left, |
|
337 x2 = x1 + this.helperProportions.width, |
|
338 y1 = this.positionAbs.top, |
|
339 y2 = y1 + this.helperProportions.height; |
|
340 |
|
341 var l = item.left, |
|
342 r = l + item.width, |
|
343 t = item.top, |
|
344 b = t + item.height; |
|
345 |
|
346 var dyClick = this.offset.click.top, |
|
347 dxClick = this.offset.click.left; |
|
348 |
|
349 var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r; |
|
350 |
|
351 if( this.options.tolerance == "pointer" |
|
352 || this.options.forcePointerForContainers |
|
353 || (this.options.tolerance != "pointer" && this.helperProportions[this.floating ? 'width' : 'height'] > item[this.floating ? 'width' : 'height']) |
|
354 ) { |
|
355 return isOverElement; |
|
356 } else { |
|
357 |
|
358 return (l < x1 + (this.helperProportions.width / 2) // Right Half |
|
359 && x2 - (this.helperProportions.width / 2) < r // Left Half |
|
360 && t < y1 + (this.helperProportions.height / 2) // Bottom Half |
|
361 && y2 - (this.helperProportions.height / 2) < b ); // Top Half |
|
362 |
|
363 } |
|
364 }, |
|
365 |
|
366 _intersectsWithPointer: function(item) { |
|
367 |
|
368 var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height), |
|
369 isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width), |
|
370 isOverElement = isOverElementHeight && isOverElementWidth, |
|
371 verticalDirection = this._getDragVerticalDirection(), |
|
372 horizontalDirection = this._getDragHorizontalDirection(); |
|
373 |
|
374 if (!isOverElement) |
|
375 return false; |
|
376 |
|
377 return this.floating ? |
|
378 ( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 ) |
|
379 : ( verticalDirection && (verticalDirection == "down" ? 2 : 1) ); |
|
380 |
|
381 }, |
|
382 |
|
383 _intersectsWithSides: function(item) { |
|
384 |
|
385 var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height), |
|
386 isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width), |
|
387 verticalDirection = this._getDragVerticalDirection(), |
|
388 horizontalDirection = this._getDragHorizontalDirection(); |
|
389 |
|
390 if (this.floating && horizontalDirection) { |
|
391 return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf)); |
|
392 } else { |
|
393 return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)); |
|
394 } |
|
395 |
|
396 }, |
|
397 |
|
398 _getDragVerticalDirection: function() { |
|
399 var delta = this.positionAbs.top - this.lastPositionAbs.top; |
|
400 return delta != 0 && (delta > 0 ? "down" : "up"); |
|
401 }, |
|
402 |
|
403 _getDragHorizontalDirection: function() { |
|
404 var delta = this.positionAbs.left - this.lastPositionAbs.left; |
|
405 return delta != 0 && (delta > 0 ? "right" : "left"); |
|
406 }, |
|
407 |
|
408 refresh: function(event) { |
|
409 this._refreshItems(event); |
|
410 this.refreshPositions(); |
|
411 }, |
|
412 |
|
413 _getItemsAsjQuery: function(connected) { |
|
414 |
|
415 var self = this; |
|
416 var items = []; |
|
417 var queries = []; |
|
418 |
|
419 if(this.options.connectWith && connected) { |
|
420 for (var i = this.options.connectWith.length - 1; i >= 0; i--){ |
|
421 var cur = $(this.options.connectWith[i]); |
|
422 for (var j = cur.length - 1; j >= 0; j--){ |
|
423 var inst = $.data(cur[j], 'sortable'); |
|
424 if(inst && inst != this && !inst.options.disabled) { |
|
425 queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]); |
|
426 } |
|
427 }; |
|
428 }; |
|
429 } |
|
430 |
|
431 queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper"), this]); |
|
432 |
|
433 for (var i = queries.length - 1; i >= 0; i--){ |
|
434 queries[i][0].each(function() { |
|
435 items.push(this); |
|
436 }); |
|
437 }; |
|
438 |
|
439 return $(items); |
|
440 |
|
441 }, |
|
442 |
|
443 _removeCurrentsFromItems: function() { |
|
444 |
|
445 var list = this.currentItem.find(":data(sortable-item)"); |
|
446 |
|
447 for (var i=0; i < this.items.length; i++) { |
|
448 |
|
449 for (var j=0; j < list.length; j++) { |
|
450 if(list[j] == this.items[i].item[0]) |
|
451 this.items.splice(i,1); |
|
452 }; |
|
453 |
|
454 }; |
|
455 |
|
456 }, |
|
457 |
|
458 _refreshItems: function(event) { |
|
459 |
|
460 this.items = []; |
|
461 this.containers = [this]; |
|
462 var items = this.items; |
|
463 var self = this; |
|
464 var queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]]; |
|
465 |
|
466 if(this.options.connectWith) { |
|
467 for (var i = this.options.connectWith.length - 1; i >= 0; i--){ |
|
468 var cur = $(this.options.connectWith[i]); |
|
469 for (var j = cur.length - 1; j >= 0; j--){ |
|
470 var inst = $.data(cur[j], 'sortable'); |
|
471 if(inst && inst != this && !inst.options.disabled) { |
|
472 queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]); |
|
473 this.containers.push(inst); |
|
474 } |
|
475 }; |
|
476 }; |
|
477 } |
|
478 |
|
479 for (var i = queries.length - 1; i >= 0; i--) { |
|
480 var targetData = queries[i][1]; |
|
481 var _queries = queries[i][0]; |
|
482 |
|
483 for (var j=0, queriesLength = _queries.length; j < queriesLength; j++) { |
|
484 var item = $(_queries[j]); |
|
485 |
|
486 item.data('sortable-item', targetData); // Data for target checking (mouse manager) |
|
487 |
|
488 items.push({ |
|
489 item: item, |
|
490 instance: targetData, |
|
491 width: 0, height: 0, |
|
492 left: 0, top: 0 |
|
493 }); |
|
494 }; |
|
495 }; |
|
496 |
|
497 }, |
|
498 |
|
499 refreshPositions: function(fast) { |
|
500 |
|
501 //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change |
|
502 if(this.offsetParent && this.helper) { |
|
503 this.offset.parent = this._getParentOffset(); |
|
504 } |
|
505 |
|
506 for (var i = this.items.length - 1; i >= 0; i--){ |
|
507 var item = this.items[i]; |
|
508 |
|
509 //We ignore calculating positions of all connected containers when we're not over them |
|
510 if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) |
|
511 continue; |
|
512 |
|
513 var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item; |
|
514 |
|
515 if (!fast) { |
|
516 if (this.options.accurateIntersection) { |
|
517 item.width = t.outerWidth(); |
|
518 item.height = t.outerHeight(); |
|
519 } |
|
520 else { |
|
521 item.width = t[0].offsetWidth; |
|
522 item.height = t[0].offsetHeight; |
|
523 } |
|
524 } |
|
525 |
|
526 var p = t.offset(); |
|
527 item.left = p.left; |
|
528 item.top = p.top; |
|
529 }; |
|
530 |
|
531 if(this.options.custom && this.options.custom.refreshContainers) { |
|
532 this.options.custom.refreshContainers.call(this); |
|
533 } else { |
|
534 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
535 var p = this.containers[i].element.offset(); |
|
536 this.containers[i].containerCache.left = p.left; |
|
537 this.containers[i].containerCache.top = p.top; |
|
538 this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); |
|
539 this.containers[i].containerCache.height = this.containers[i].element.outerHeight(); |
|
540 }; |
|
541 } |
|
542 |
|
543 }, |
|
544 |
|
545 _createPlaceholder: function(that) { |
|
546 |
|
547 var self = that || this, o = self.options; |
|
548 |
|
549 if(!o.placeholder || o.placeholder.constructor == String) { |
|
550 var className = o.placeholder; |
|
551 o.placeholder = { |
|
552 element: function() { |
|
553 |
|
554 var el = $(document.createElement(self.currentItem[0].nodeName)) |
|
555 .addClass(className || self.currentItem[0].className+" ui-sortable-placeholder") |
|
556 .removeClass('ui-sortable-helper')[0]; |
|
557 |
|
558 if(!className) { |
|
559 el.style.visibility = "hidden"; |
|
560 document.body.appendChild(el); |
|
561 // Name attributes are removed, otherwice causes elements to be unchecked |
|
562 // Expando attributes also have to be removed because of stupid IE (no condition, doesn't hurt in other browsers) |
|
563 el.innerHTML = self.currentItem[0].innerHTML.replace(/name\=\"[^\"\']+\"/g, '').replace(/jQuery[0-9]+\=\"[^\"\']+\"/g, ''); |
|
564 document.body.removeChild(el); |
|
565 }; |
|
566 |
|
567 return el; |
|
568 }, |
|
569 update: function(container, p) { |
|
570 if(className && !o.forcePlaceholderSize) return; |
|
571 if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10)); }; |
|
572 if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem.css('paddingRight')||0, 10)); }; |
|
573 } |
|
574 }; |
|
575 } |
|
576 |
|
577 //Create the placeholder |
|
578 self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem)); |
|
579 |
|
580 //Append it after the actual current item |
|
581 self.currentItem.after(self.placeholder); |
|
582 |
|
583 //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317) |
|
584 o.placeholder.update(self, self.placeholder); |
|
585 |
|
586 }, |
|
587 |
|
588 _contactContainers: function(event) { |
|
589 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
590 |
|
591 if(this._intersectsWith(this.containers[i].containerCache)) { |
|
592 if(!this.containers[i].containerCache.over) { |
|
593 |
|
594 if(this.currentContainer != this.containers[i]) { |
|
595 |
|
596 //When entering a new container, we will find the item with the least distance and append our item near it |
|
597 var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'left' : 'top']; |
|
598 for (var j = this.items.length - 1; j >= 0; j--) { |
|
599 if(!$.ui.contains(this.containers[i].element[0], this.items[j].item[0])) continue; |
|
600 var cur = this.items[j][this.containers[i].floating ? 'left' : 'top']; |
|
601 if(Math.abs(cur - base) < dist) { |
|
602 dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; |
|
603 } |
|
604 } |
|
605 |
|
606 if(!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if dropOnEmpty is enabled |
|
607 continue; |
|
608 |
|
609 this.currentContainer = this.containers[i]; |
|
610 itemWithLeastDistance ? this.options.sortIndicator.call(this, event, itemWithLeastDistance, null, true) : this.options.sortIndicator.call(this, event, null, this.containers[i].element, true); |
|
611 this._propagate("change", event); //Call plugins and callbacks |
|
612 this.containers[i]._propagate("change", event, this); //Call plugins and callbacks |
|
613 |
|
614 //Update the placeholder |
|
615 this.options.placeholder.update(this.currentContainer, this.placeholder); |
|
616 |
|
617 } |
|
618 |
|
619 this.containers[i]._propagate("over", event, this); |
|
620 this.containers[i].containerCache.over = 1; |
|
621 } |
|
622 } else { |
|
623 if(this.containers[i].containerCache.over) { |
|
624 this.containers[i]._propagate("out", event, this); |
|
625 this.containers[i].containerCache.over = 0; |
|
626 } |
|
627 } |
|
628 |
|
629 }; |
|
630 }, |
|
631 |
|
632 _createHelper: function(event) { |
|
633 |
|
634 var o = this.options; |
|
635 var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper == 'clone' ? this.currentItem.clone() : this.currentItem); |
|
636 |
|
637 if(!helper.parents('body').length) //Add the helper to the DOM if that didn't happen already |
|
638 $(o.appendTo != 'parent' ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]); |
|
639 |
|
640 if(helper[0] == this.currentItem[0]) |
|
641 this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") }; |
|
642 |
|
643 if(helper[0].style.width == '' || o.forceHelperSize) helper.width(this.currentItem.width()); |
|
644 if(helper[0].style.height == '' || o.forceHelperSize) helper.height(this.currentItem.height()); |
|
645 |
|
646 return helper; |
|
647 |
|
648 }, |
|
649 |
|
650 _adjustOffsetFromHelper: function(obj) { |
|
651 if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left; |
|
652 if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left; |
|
653 if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top; |
|
654 if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top; |
|
655 }, |
|
656 |
|
657 _getParentOffset: function() { |
|
658 |
|
659 //Get the offsetParent and cache its position |
|
660 this.offsetParent = this.helper.offsetParent(); var po = this.offsetParent.offset(); |
|
661 |
|
662 if((this.offsetParent[0] == document.body && $.browser.mozilla) //Ugly FF3 fix |
|
663 || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == 'html' && $.browser.msie)) //Ugly IE fix |
|
664 po = { top: 0, left: 0 }; |
|
665 |
|
666 return { |
|
667 top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0), |
|
668 left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0) |
|
669 }; |
|
670 |
|
671 }, |
|
672 |
|
673 _getRelativeOffset: function() { |
|
674 |
|
675 if(this.cssPosition == "relative") { |
|
676 var p = this.currentItem.position(); |
|
677 return { |
|
678 top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(), |
|
679 left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft() |
|
680 }; |
|
681 } else { |
|
682 return { top: 0, left: 0 }; |
|
683 } |
|
684 |
|
685 }, |
|
686 |
|
687 _cacheMargins: function() { |
|
688 this.margins = { |
|
689 left: (parseInt(this.currentItem.css("marginLeft"),10) || 0), |
|
690 top: (parseInt(this.currentItem.css("marginTop"),10) || 0) |
|
691 }; |
|
692 }, |
|
693 |
|
694 _cacheHelperProportions: function() { |
|
695 this.helperProportions = { |
|
696 width: this.helper.outerWidth(), |
|
697 height: this.helper.outerHeight() |
|
698 }; |
|
699 }, |
|
700 |
|
701 _setContainment: function() { |
|
702 |
|
703 var o = this.options; |
|
704 if(o.containment == 'parent') o.containment = this.helper[0].parentNode; |
|
705 if(o.containment == 'document' || o.containment == 'window') this.containment = [ |
|
706 0 - this.offset.relative.left - this.offset.parent.left, |
|
707 0 - this.offset.relative.top - this.offset.parent.top, |
|
708 $(o.containment == 'document' ? document : window).width() - this.offset.relative.left - this.offset.parent.left - this.margins.left - (parseInt(this.currentItem.css("marginRight"),10) || 0), |
|
709 ($(o.containment == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.offset.relative.top - this.offset.parent.top - this.margins.top - (parseInt(this.currentItem.css("marginBottom"),10) || 0) |
|
710 ]; |
|
711 |
|
712 if(!(/^(document|window|parent)$/).test(o.containment)) { |
|
713 var ce = $(o.containment)[0]; |
|
714 var co = $(o.containment).offset(); |
|
715 var over = ($(ce).css("overflow") != 'hidden'); |
|
716 |
|
717 this.containment = [ |
|
718 co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) - this.offset.relative.left - this.offset.parent.left - this.margins.left, |
|
719 co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) - this.offset.relative.top - this.offset.parent.top - this.margins.top, |
|
720 co.left + (over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - this.offset.relative.left - this.offset.parent.left - this.margins.left, |
|
721 co.top + (over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - this.offset.relative.top - this.offset.parent.top - this.margins.top |
|
722 ]; |
|
723 } |
|
724 |
|
725 }, |
|
726 |
|
727 _convertPositionTo: function(d, pos) { |
|
728 |
|
729 if(!pos) pos = this.position; |
|
730 var mod = d == "absolute" ? 1 : -1; |
|
731 var scroll = this[(this.cssPosition == 'absolute' ? 'offset' : 'scroll')+'Parent'], scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); |
|
732 |
|
733 return { |
|
734 top: ( |
|
735 pos.top // the calculated relative position |
|
736 + this.offset.relative.top * mod // Only for relative positioned nodes: Relative offset from element to offset parent |
|
737 + this.offset.parent.top * mod // The offsetParent's offset without borders (offset + border) |
|
738 + ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod |
|
739 + this.margins.top * mod //Add the margin (you don't want the margin counting in intersection methods) |
|
740 ), |
|
741 left: ( |
|
742 pos.left // the calculated relative position |
|
743 + this.offset.relative.left * mod // Only for relative positioned nodes: Relative offset from element to offset parent |
|
744 + this.offset.parent.left * mod // The offsetParent's offset without borders (offset + border) |
|
745 + ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : ( scrollIsRootNode ? 0 : scroll.scrollLeft() ) ) * mod |
|
746 + this.margins.left * mod //Add the margin (you don't want the margin counting in intersection methods) |
|
747 ) |
|
748 }; |
|
749 }, |
|
750 |
|
751 _generatePosition: function(event) { |
|
752 |
|
753 var o = this.options, scroll = this[(this.cssPosition == 'absolute' ? 'offset' : 'scroll')+'Parent'], scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); |
|
754 |
|
755 var position = { |
|
756 top: ( |
|
757 event.pageY // The absolute mouse position |
|
758 - this.offset.click.top // Click offset (relative to the element) |
|
759 - this.offset.relative.top // Only for relative positioned nodes: Relative offset from element to offset parent |
|
760 - this.offset.parent.top // The offsetParent's offset without borders (offset + border) |
|
761 + ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) |
|
762 ), |
|
763 left: ( |
|
764 event.pageX // The absolute mouse position |
|
765 - this.offset.click.left // Click offset (relative to the element) |
|
766 - this.offset.relative.left // Only for relative positioned nodes: Relative offset from element to offset parent |
|
767 - this.offset.parent.left // The offsetParent's offset without borders (offset + border) |
|
768 + ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : ( scrollIsRootNode ? 0 : scroll.scrollLeft() ) ) |
|
769 ) |
|
770 }; |
|
771 |
|
772 if(!this.originalPosition) return position; //If we are not dragging yet, we won't check for options |
|
773 |
|
774 /* |
|
775 * - Position constraining - |
|
776 * Constrain the position to a mix of grid, containment. |
|
777 */ |
|
778 if(this.containment) { |
|
779 if(position.left < this.containment[0]) position.left = this.containment[0]; |
|
780 if(position.top < this.containment[1]) position.top = this.containment[1]; |
|
781 if(position.left + this.helperProportions.width > this.containment[2]) position.left = this.containment[2] - this.helperProportions.width; |
|
782 if(position.top + this.helperProportions.height > this.containment[3]) position.top = this.containment[3] - this.helperProportions.height; |
|
783 } |
|
784 |
|
785 if(o.grid) { |
|
786 var top = this.originalPosition.top + Math.round((position.top - this.originalPosition.top) / o.grid[1]) * o.grid[1]; |
|
787 position.top = this.containment ? (!(top < this.containment[1] || top > this.containment[3]) ? top : (!(top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; |
|
788 |
|
789 var left = this.originalPosition.left + Math.round((position.left - this.originalPosition.left) / o.grid[0]) * o.grid[0]; |
|
790 position.left = this.containment ? (!(left < this.containment[0] || left > this.containment[2]) ? left : (!(left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; |
|
791 } |
|
792 |
|
793 return position; |
|
794 }, |
|
795 |
|
796 _rearrange: function(event, i, a, hardRefresh) { |
|
797 |
|
798 a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? i.item[0] : i.item[0].nextSibling)); |
|
799 |
|
800 //Various things done here to improve the performance: |
|
801 // 1. we create a setTimeout, that calls refreshPositions |
|
802 // 2. on the instance, we have a counter variable, that get's higher after every append |
|
803 // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same |
|
804 // 4. this lets only the last addition to the timeout stack through |
|
805 this.counter = this.counter ? ++this.counter : 1; |
|
806 var self = this, counter = this.counter; |
|
807 |
|
808 window.setTimeout(function() { |
|
809 if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove |
|
810 },0); |
|
811 |
|
812 }, |
|
813 |
|
814 _clear: function(event, noPropagation) { |
|
815 |
|
816 this.reverting = false; |
|
817 |
|
818 //We first have to update the dom position of the actual currentItem |
|
819 if(!this._noFinalSort) this.placeholder.before(this.currentItem); |
|
820 this._noFinalSort = null; |
|
821 |
|
822 if(this.helper[0] == this.currentItem[0]) { |
|
823 for(var i in this._storedCSS) { |
|
824 if(this._storedCSS[i] == 'auto' || this._storedCSS[i] == 'static') this._storedCSS[i] = ''; |
|
825 } |
|
826 this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); |
|
827 } else { |
|
828 this.currentItem.show(); |
|
829 } |
|
830 |
|
831 if(this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) this._propagate("update", event, null, noPropagation); //Trigger update callback if the DOM position has changed |
|
832 if(!$.ui.contains(this.element[0], this.currentItem[0])) { //Node was moved out of the current element |
|
833 this._propagate("remove", event, null, noPropagation); |
|
834 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
835 if($.ui.contains(this.containers[i].element[0], this.currentItem[0])) { |
|
836 this.containers[i]._propagate("update", event, this, noPropagation); |
|
837 this.containers[i]._propagate("receive", event, this, noPropagation); |
|
838 } |
|
839 }; |
|
840 }; |
|
841 |
|
842 //Post events to containers |
|
843 for (var i = this.containers.length - 1; i >= 0; i--){ |
|
844 this.containers[i]._propagate("deactivate", event, this, noPropagation); |
|
845 if(this.containers[i].containerCache.over) { |
|
846 this.containers[i]._propagate("out", event, this); |
|
847 this.containers[i].containerCache.over = 0; |
|
848 } |
|
849 } |
|
850 |
|
851 this.dragging = false; |
|
852 if(this.cancelHelperRemoval) { |
|
853 this._propagate("beforeStop", event, null, noPropagation); |
|
854 this._propagate("stop", event, null, noPropagation); |
|
855 return false; |
|
856 } |
|
857 |
|
858 this._propagate("beforeStop", event, null, noPropagation); |
|
859 |
|
860 //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! |
|
861 this.placeholder[0].parentNode.removeChild(this.placeholder[0]); |
|
862 |
|
863 if(this.options.helper != "original") this.helper.remove(); this.helper = null; |
|
864 this._propagate("stop", event, null, noPropagation); |
|
865 |
|
866 return true; |
|
867 |
|
868 }, |
|
869 |
|
870 _propagate: function(n, event, inst, noPropagation) { |
|
871 $.ui.plugin.call(this, n, [event, this._ui(inst)]); |
|
872 var dontCancel = !noPropagation ? this.element.triggerHandler(n == "sort" ? n : "sort"+n, [event, this._ui(inst)], this.options[n]) : true; |
|
873 if(dontCancel === false) this.cancel(); |
|
874 }, |
|
875 |
|
876 plugins: {}, |
|
877 |
|
878 _ui: function(inst) { |
|
879 var self = inst || this; |
|
880 return { |
|
881 helper: self.helper, |
|
882 placeholder: self.placeholder || $([]), |
|
883 position: self.position, |
|
884 absolutePosition: self.positionAbs, |
|
885 item: self.currentItem, |
|
886 sender: inst ? inst.element : null |
|
887 }; |
|
888 } |
|
889 |
|
890 })); |
|
891 |
|
892 $.extend($.ui.sortable, { |
|
893 getter: "serialize toArray", |
|
894 version: "1.6", |
|
895 defaults: { |
|
896 accurateIntersection: true, |
|
897 appendTo: "parent", |
|
898 cancel: ":input", |
|
899 delay: 0, |
|
900 distance: 1, |
|
901 dropOnEmpty: true, |
|
902 forcePlaceholderSize: false, |
|
903 forceHelperSize: false, |
|
904 helper: "original", |
|
905 items: '> *', |
|
906 scope: "default", |
|
907 scroll: true, |
|
908 scrollSensitivity: 20, |
|
909 scrollSpeed: 20, |
|
910 sortIndicator: $.ui.sortable.prototype._rearrange, |
|
911 tolerance: "default", |
|
912 zIndex: 1000 |
|
913 } |
|
914 }); |
|
915 |
|
916 /* |
|
917 * Sortable Extensions |
|
918 */ |
|
919 |
|
920 $.ui.plugin.add("sortable", "cursor", { |
|
921 start: function(event, ui) { |
|
922 var t = $('body'), i = $(this).data('sortable'); |
|
923 if (t.css("cursor")) i.options._cursor = t.css("cursor"); |
|
924 t.css("cursor", i.options.cursor); |
|
925 }, |
|
926 beforeStop: function(event, ui) { |
|
927 var i = $(this).data('sortable'); |
|
928 if (i.options._cursor) $('body').css("cursor", i.options._cursor); |
|
929 } |
|
930 }); |
|
931 |
|
932 $.ui.plugin.add("sortable", "opacity", { |
|
933 start: function(event, ui) { |
|
934 var t = ui.helper, i = $(this).data('sortable'); |
|
935 if(t.css("opacity")) i.options._opacity = t.css("opacity"); |
|
936 t.css('opacity', i.options.opacity); |
|
937 }, |
|
938 beforeStop: function(event, ui) { |
|
939 var i = $(this).data('sortable'); |
|
940 if(i.options._opacity) $(ui.helper).css('opacity', i.options._opacity); |
|
941 } |
|
942 }); |
|
943 |
|
944 $.ui.plugin.add("sortable", "scroll", { |
|
945 start: function(event, ui) { |
|
946 var i = $(this).data("sortable"), o = i.options; |
|
947 if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset(); |
|
948 }, |
|
949 sort: function(event, ui) { |
|
950 |
|
951 var i = $(this).data("sortable"), o = i.options, scrolled = false; |
|
952 |
|
953 if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') { |
|
954 |
|
955 if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) |
|
956 i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed; |
|
957 else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) |
|
958 i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed; |
|
959 |
|
960 if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) |
|
961 i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed; |
|
962 else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) |
|
963 i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed; |
|
964 |
|
965 } else { |
|
966 |
|
967 if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) |
|
968 scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); |
|
969 else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) |
|
970 scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); |
|
971 |
|
972 if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) |
|
973 scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed); |
|
974 else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) |
|
975 scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed); |
|
976 |
|
977 } |
|
978 |
|
979 if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) |
|
980 $.ui.ddmanager.prepareOffsets(i, event); |
|
981 |
|
982 |
|
983 |
|
984 //This is a special case where we need to modify a offset calculated on start, since the following happened: |
|
985 // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent |
|
986 // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that |
|
987 // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag |
|
988 if(scrolled !== false && i.cssPosition == 'absolute' && i.scrollParent[0] != document && $.ui.contains(i.scrollParent[0], i.offsetParent[0])) { |
|
989 i.offset.parent = i._getParentOffset(); |
|
990 } |
|
991 |
|
992 // This is another very weird special case that only happens for relative elements: |
|
993 // 1. If the css position is relative |
|
994 // 2. and the scroll parent is the document or similar to the offset parent |
|
995 // we have to refresh the relative offset during the scroll so there are no jumps |
|
996 if(scrolled !== false && i.cssPosition == 'relative' && !(i.scrollParent[0] != document && i.scrollParent[0] != i.offsetParent[0])) { |
|
997 i.offset.relative = i._getRelativeOffset(); |
|
998 } |
|
999 |
|
1000 } |
|
1001 }); |
|
1002 |
|
1003 $.ui.plugin.add("sortable", "zIndex", { |
|
1004 start: function(event, ui) { |
|
1005 var t = ui.helper, i = $(this).data('sortable'); |
|
1006 if(t.css("zIndex")) i.options._zIndex = t.css("zIndex"); |
|
1007 t.css('zIndex', i.options.zIndex); |
|
1008 }, |
|
1009 beforeStop: function(event, ui) { |
|
1010 var i = $(this).data('sortable'); |
|
1011 if(i.options._zIndex) $(ui.helper).css('zIndex', i.options._zIndex == 'auto' ? '' : i.options._zIndex); |
|
1012 } |
|
1013 }); |
|
1014 |
|
1015 })(jQuery); |