/* * based on jQuery UI Sortable 1.7.2 * * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) and Steven Lots (Lotsofdots bvba) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * http://docs.jquery.com/UI/Sortables * http://www.b-hind.eu/jquery/ * Depends: * ui.core.js */ (function(jQ) { jQ.widget("ui.sortable", jQ.extend({}, jQ.ui.mouse, { _init: function() { var o = this.options; this.containerCache = {}; this.element.addClass("ui-sortable"); //Get the items this.refresh(); //Let's determine if the items are floating this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false; //Let's determine the parent's offset this.offset = this.element.offset(); //Initialize mouse events for interaction this._mouseInit(); }, destroy: function() { this.element .removeClass("ui-sortable ui-sortable-disabled") .removeData("sortable") .unbind(".sortable"); this._mouseDestroy(); for (var i = this.items.length - 1; i >= 0; i--) this.items[i].item.removeData("sortable-item"); }, _mouseCapture: function(event, overrideHandle) { if (this.reverting) { return false; } if (this.options.disabled || this.options.type == 'static') return false; //We have to refresh the items data once first this._refreshItems(event); //Find out if the clicked node (or one of its parents) is a actual item in this.items var currentItem = null, self = this, nodes = jQ(event.target).parents().each(function() { if (jQ.data(this, 'sortable-item') == self) { currentItem = jQ(this); return false; } }); if (jQ.data(event.target, 'sortable-item') == self) currentItem = jQ(event.target); if (!currentItem) return false; if (this.options.handle && !overrideHandle) { var validHandle = false; jQ(this.options.handle, currentItem).find("*").andSelf().each(function() { if (this == event.target) validHandle = true; }); if (!validHandle) return false; } this.currentItem = currentItem; this._removeCurrentsFromItems(); return true; }, _mouseStart: function(event, overrideHandle, noActivation) { var o = this.options, self = this; this.currentContainer = this; //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture this.refreshPositions(); //Create and append the visible helper this.helper = this._createHelper(event); //Cache the helper size this._cacheHelperProportions(); /* * - Position generation - * This block generates everything position related - it's the core of draggables. */ //Cache the margins of the original element this._cacheMargins(); //Get the next scrolling parent this.scrollParent = this.helper.scrollParent(); //The element's absolute position on the page minus margins this.offset = this.currentItem.offset(); this.offset = { top: this.offset.top - this.margins.top, left: this.offset.left - this.margins.left }; // Only after we got the offset, we can change the helper's position to absolute // TODO: Still need to figure out a way to make relative sorting possible this.helper.css("position", "absolute"); this.cssPosition = this.helper.css("position"); jQ.extend(this.offset, { click: { //Where the click happened, relative to the element left: event.pageX - this.offset.left, top: event.pageY - this.offset.top }, parent: this._getParentOffset(), relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper }); //Generate the original position this.originalPosition = this._generatePosition(event); this.originalPageX = event.pageX; this.originalPageY = event.pageY; //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied if (o.cursorAt) this._adjustOffsetFromHelper(o.cursorAt); //Cache the former DOM position this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] }; //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 if (this.helper[0] != this.currentItem[0]) { this.currentItem.hide(); } //Create the placeholder this._createPlaceholder(); //Set a containment if given in the options if (o.containment) this._setContainment(); if (o.cursor) { // cursor option if (jQ('body').css("cursor")) this._storedCursor = jQ('body').css("cursor"); jQ('body').css("cursor", o.cursor); } if (o.opacity) { // opacity option if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity"); this.helper.css("opacity", o.opacity); } if (o.zIndex) { // zIndex option if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex"); this.helper.css("zIndex", o.zIndex); } //Prepare scrolling if (this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') this.overflowOffset = this.scrollParent.offset(); //Call callbacks this._trigger("start", event, this._uiHash()); //Recache the helper size if (!this._preserveHelperProportions) this._cacheHelperProportions(); //Post 'activate' events to possible containers if (!noActivation) { for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); } } //Prepare possible droppables if (jQ.ui.ddmanager) jQ.ui.ddmanager.current = this; if (jQ.ui.ddmanager && !o.dropBehaviour) jQ.ui.ddmanager.prepareOffsets(this, event); this.dragging = true; this.helper.addClass("ui-sortable-helper"); this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position return true; }, _mouseDrag: function(event) { //Compute the helpers position this.position = this._generatePosition(event); //console.log(this.position); //b-hind this.positionAbs = this._convertPositionTo("absolute"); if (!this.lastPositionAbs) { this.lastPositionAbs = this.positionAbs; } //Do scrolling if (this.options.scroll) { var o = this.options, scrolled = false; if (this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') { if ((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed; else if (event.pageY - this.overflowOffset.top < o.scrollSensitivity) this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed; if ((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed; else if (event.pageX - this.overflowOffset.left < o.scrollSensitivity) this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed; } else { if (event.pageY - jQ(document).scrollTop() < o.scrollSensitivity) scrolled = jQ(document).scrollTop(jQ(document).scrollTop() - o.scrollSpeed); else if (jQ(window).height() - (event.pageY - jQ(document).scrollTop()) < o.scrollSensitivity) scrolled = jQ(document).scrollTop(jQ(document).scrollTop() + o.scrollSpeed); if (event.pageX - jQ(document).scrollLeft() < o.scrollSensitivity) scrolled = jQ(document).scrollLeft(jQ(document).scrollLeft() - o.scrollSpeed); else if (jQ(window).width() - (event.pageX - jQ(document).scrollLeft()) < o.scrollSensitivity) scrolled = jQ(document).scrollLeft(jQ(document).scrollLeft() + o.scrollSpeed); } if (scrolled !== false && jQ.ui.ddmanager && !o.dropBehaviour) jQ.ui.ddmanager.prepareOffsets(this, event); } //Regenerate the absolute position used for position checks this.positionAbs = this._convertPositionTo("absolute"); //Set the helper position if (!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left + 'px'; if (!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top + 'px'; //Rearrange for (var i = this.items.length - 1; i >= 0; i--) { //Cache variables and intersection, continue if no intersection var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item); if (!intersection) continue; if (itemElement != this.currentItem[0] //cannot intersect with itself && this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before && !jQ.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked && (this.options.type == 'semi-dynamic' ? !jQ.ui.contains(this.element[0], itemElement) : true) ) { this.direction = intersection == 1 ? "down" : "up"; //b-hind : here we must also check //var level = this._getLevel(item.item); //console.log(jQ.ui.isOverAxis(this.positionAbs.left, item.left, item.width)); //var haschildNode = this._hasChildNodes(item.item); //console.log("haschildNode : "+haschildNode); //moved to _rearrange if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) { this._rearrange(event, item); } else { break; } this._trigger("change", event, this._uiHash()); break; } } //Post events to containers this._contactContainers(event); //Interconnect with droppables if (jQ.ui.ddmanager) jQ.ui.ddmanager.drag(this, event); //Call callbacks this._trigger('sort', event, this._uiHash()); this.lastPositionAbs = this.positionAbs; return false; }, _mouseStop: function(event, noPropagation) { if (!event) return; //If we are using droppables, inform the manager about the drop if (jQ.ui.ddmanager && !this.options.dropBehaviour) jQ.ui.ddmanager.drop(this, event); if (this.options.revert) { var self = this; var cur = self.placeholder.offset(); self.reverting = true; jQ(this.helper).animate({ left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft), top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop) }, parseInt(this.options.revert, 10) || 500, function() { self._clear(event); }); } else { this._clear(event, noPropagation); } return false; }, cancel: function() { var self = this; if (this.dragging) { this._mouseUp(); if (this.options.helper == "original") this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); else this.currentItem.show(); //Post deactivating events to containers for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("deactivate", null, self._uiHash(this)); if (this.containers[i].containerCache.over) { this.containers[i]._trigger("out", null, self._uiHash(this)); this.containers[i].containerCache.over = 0; } } } //jQ(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! if (this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]); if (this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove(); jQ.extend(this, { helper: null, dragging: false, reverting: false, _noFinalSort: null }); if (this.domPosition.prev) { jQ(this.domPosition.prev).after(this.currentItem); } else { jQ(this.domPosition.parent).prepend(this.currentItem); } return true; }, serialize: function(o) { var items = this._getItemsAsjQuery(o && o.connected); var str = []; o = o || {}; if (this.options.nested) { var level = 0; var levels = []; var key = 0; for (var i = 0; i < items.length; i++) { var itemlevel = this._getLevel(jQ(items[i])); if (level == itemlevel) { var res = (jQ(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); if (res) str.push((o.key || res[1] + (itemlevel == 1 ? "" : "_" + levels[levels.length - 1]) + '[]') + '=' + (o.key && o.expression ? res[1] : res[2])); if (res) key = res[2]; } else if (itemlevel > level) { level = itemlevel; var res = (jQ(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); if (res) levels[levels.length] = key; if (res) str.push((o.key || res[1] + (itemlevel == 1 ? "" : "_" + levels[levels.length - 1]) + '[]') + '=' + (o.key && o.expression ? res[1] : res[2])); if (res) key = res[2]; } else { do { levels.pop(); key = levels[levels.length - 1]; level--; } while (level > itemlevel); var res = (jQ(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); if (res) str.push((o.key || res[1] + (itemlevel == 1 ? "" : "_" + key) + '[]') + '=' + (o.key && o.expression ? res[1] : res[2])); } } } else { jQ(items).each(function() { var res = (jQ(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); if (res) str.push((o.key || res[1] + '[]') + '=' + (o.key && o.expression ? res[1] : res[2])); }); } return str.join('&'); }, toArray: function(o) { var items = this._getItemsAsjQuery(o && o.connected); var ret = []; o = o || {}; var self = this; //add first item is always level 1 if (this.options.nested) { var level = 1; var currentAr = ret; var levels = []; for (var i = 0; i < items.length; i++) { var item = items[i]; var itemlevel = this._getLevel(jQ(item)); if (itemlevel == level) { currentAr.push([jQ(o.item || item).attr(o.attribute || 'id') || '', []]); } else if (itemlevel > level) { level = itemlevel; levels[levels.length] = currentAr; // get last element currentAr = currentAr[currentAr.length - 1][1]; currentAr.push([jQ(o.item || item).attr(o.attribute || 'id') || '', []]); } else { do { currentAr = levels[levels.length - 1]; levels.pop(); level--; } while (level > itemlevel); currentAr.push([jQ(o.item || item).attr(o.attribute || 'id') || '', []]); } } } else { items.each(function() { ret.push(jQ(o.item || this).attr(o.attribute || 'id') || ''); }); } return ret; }, /* Be careful with the following core functions */ _intersectsWith: function(item) { var x1 = this.positionAbs.left, x2 = x1 + this.helperProportions.width, y1 = this.positionAbs.top, y2 = y1 + this.helperProportions.height; var l = item.left, r = l + item.width, t = item.top, b = t + item.height; var dyClick = this.offset.click.top, dxClick = this.offset.click.left; var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r; if (this.options.tolerance == "pointer" || this.options.forcePointerForContainers || (this.options.tolerance != "pointer" && this.helperProportions[this.floating ? 'width' : 'height'] > item[this.floating ? 'width' : 'height']) ) { return isOverElement; } else { return (l < x1 + (this.helperProportions.width / 2) // Right Half && x2 - (this.helperProportions.width / 2) < r // Left Half && t < y1 + (this.helperProportions.height / 2) // Bottom Half && y2 - (this.helperProportions.height / 2) < b); // Top Half } }, /* check of the pointer is over an other element (while dragging) */ _intersectsWithPointer: function(item) { var isOverElementHeight = jQ.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height), isOverElementWidth = jQ.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width), isOverElement = isOverElementHeight && isOverElementWidth, verticalDirection = this._getDragVerticalDirection(), horizontalDirection = this._getDragHorizontalDirection(); if (!isOverElement) return false; return this.floating ? (((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1) : (verticalDirection && (verticalDirection == "down" ? 2 : 1)); }, /* check of the dragged element is over an other element */ _intersectsWithSides: function(item) { var isOverBottomHalf = jQ.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height / 2), item.height), isOverRightHalf = jQ.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width / 2), item.width), verticalDirection = this._getDragVerticalDirection(), horizontalDirection = this._getDragHorizontalDirection(); if (this.floating && horizontalDirection) { return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf)); } else { return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)); } }, _getDragVerticalDirection: function() { var delta = this.positionAbs.top - this.lastPositionAbs.top; return delta != 0 && (delta > 0 ? "down" : "up"); }, _getDragHorizontalDirection: function() { var delta = this.positionAbs.left - this.lastPositionAbs.left; return delta != 0 && (delta > 0 ? "right" : "left"); }, refresh: function(event) { this._refreshItems(event); this.refreshPositions(); }, _connectWith: function() { var options = this.options; return options.connectWith.constructor == String ? [options.connectWith] : options.connectWith; }, _getItemsAsjQuery: function(connected) { var self = this; var items = []; var queries = []; var connectWith = this._connectWith(); if (connectWith && connected) { for (var i = connectWith.length - 1; i >= 0; i--) { var cur = jQ(connectWith[i]); for (var j = cur.length - 1; j >= 0; j--) { var inst = jQ.data(cur[j], 'sortable'); if (inst && inst != this && !inst.options.disabled) { queries.push([jQ.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : jQ(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]); } }; }; } queries.push([jQ.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : jQ(this.options.items, this.element).not(".ui-sortable-helper"), this]); for (var i = queries.length - 1; i >= 0; i--) { queries[i][0].each(function() { items.push(this); }); }; return jQ(items); }, _removeCurrentsFromItems: function() { var list = this.currentItem.find(":data(sortable-item)"); for (var i = 0; i < this.items.length; i++) { for (var j = 0; j < list.length; j++) { if (list[j] == this.items[i].item[0]) this.items.splice(i, 1); }; }; }, _refreshItems: function(event) { this.items = []; this.containers = [this]; var items = this.items; var self = this; var queries = [[jQ.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : jQ(this.options.items, this.element), this]]; var connectWith = this._connectWith(); if (connectWith) { for (var i = connectWith.length - 1; i >= 0; i--) { var cur = jQ(connectWith[i]); for (var j = cur.length - 1; j >= 0; j--) { var inst = jQ.data(cur[j], 'sortable'); if (inst && inst != this && !inst.options.disabled) { queries.push([jQ.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : jQ(inst.options.items, inst.element), inst]); this.containers.push(inst); } }; }; } for (var i = queries.length - 1; i >= 0; i--) { var targetData = queries[i][1]; var _queries = queries[i][0]; for (var j = 0, queriesLength = _queries.length; j < queriesLength; j++) { var item = jQ(_queries[j]); item.data('sortable-item', targetData); // Data for target checking (mouse manager) items.push({ item: item, instance: targetData, width: 0, height: 0, left: 0, top: 0 }); }; }; }, refreshPositions: function(fast) { //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change if (this.offsetParent && this.helper) { this.offset.parent = this._getParentOffset(); } for (var i = this.items.length - 1; i >= 0; i--) { var item = this.items[i]; //We ignore calculating positions of all connected containers when we're not over them if (item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) continue; var t = this.options.toleranceElement ? jQ(this.options.toleranceElement, item.item) : item.item; if (!fast) { item.width = t.outerWidth(); item.height = t.outerHeight(); } var p = t.offset(); item.left = p.left; item.top = p.top; }; if (this.options.custom && this.options.custom.refreshContainers) { this.options.custom.refreshContainers.call(this); } else { for (var i = this.containers.length - 1; i >= 0; i--) { var p = this.containers[i].element.offset(); this.containers[i].containerCache.left = p.left; this.containers[i].containerCache.top = p.top; this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); this.containers[i].containerCache.height = this.containers[i].element.outerHeight(); }; } }, _createPlaceholder: function(that) { var self = that || this, o = self.options; if (!o.placeholder || o.placeholder.constructor == String) { var className = o.placeholder; o.placeholder = { element: function() { var el = jQ(document.createElement(self.currentItem[0].nodeName)) .addClass(className || self.currentItem[0].className + " ui-sortable-placeholder") .removeClass("ui-sortable-helper")[0]; if (!className) el.style.visibility = "hidden"; return el; }, update: function(container, p) { // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified if (className && !o.forcePlaceholderSize) return; //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item if (!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop') || 0, 10) - parseInt(self.currentItem.css('paddingBottom') || 0, 10)); }; if (!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft') || 0, 10) - parseInt(self.currentItem.css('paddingRight') || 0, 10)); }; } }; } //Create the placeholder self.placeholder = jQ(o.placeholder.element.call(self.element, self.currentItem)); //Append it after the actual current item /********************************************** b-hind patch : append it after or as a child if nested is true check position of element problem : on deep nested items what is te depth of the required item to place first solution: create a visible location after each depth -> requires a fyical height and chacges the layout of the nested tree:( second solution : check the indent from the helper, but what if the nesteditems dont have an indent We go for the second solution !!! so what tot do: check the indent of each read left -padding or left -margin if the helper (left side is between th left side of the parent en itself put it as an extra element of the parent if it is larger than itself put it as a child/ **********************************************/ self.currentItem.after(self.placeholder); //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317) o.placeholder.update(self, self.placeholder); }, _contactContainers: function(event) { for (var i = this.containers.length - 1; i >= 0; i--) { if (this._intersectsWith(this.containers[i].containerCache)) { if (!this.containers[i].containerCache.over) { if (this.currentContainer != this.containers[i]) { //When entering a new container, we will find the item with the least distance and append our item near it var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'left' : 'top']; for (var j = this.items.length - 1; j >= 0; j--) { if (!jQ.ui.contains(this.containers[i].element[0], this.items[j].item[0])) continue; var cur = this.items[j][this.containers[i].floating ? 'left' : 'top']; if (Math.abs(cur - base) < dist) { dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; } } if (!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if dropOnEmpty is enabled continue; this.currentContainer = this.containers[i]; itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[i].element, true); this._trigger("change", event, this._uiHash()); this.containers[i]._trigger("change", event, this._uiHash(this)); //Update the placeholder this.options.placeholder.update(this.currentContainer, this.placeholder); } this.containers[i]._trigger("over", event, this._uiHash(this)); this.containers[i].containerCache.over = 1; } } else { if (this.containers[i].containerCache.over) { this.containers[i]._trigger("out", event, this._uiHash(this)); this.containers[i].containerCache.over = 0; } } }; }, _createHelper: function(event) { var o = this.options; var helper = jQ.isFunction(o.helper) ? jQ(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper == 'clone' ? this.currentItem.clone() : this.currentItem); if (!helper.parents('body').length) //Add the helper to the DOM if that didn't happen already jQ(o.appendTo != 'parent' ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]); if (helper[0] == this.currentItem[0]) 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") }; if (helper[0].style.width == '' || o.forceHelperSize) helper.width(this.currentItem.width()); if (helper[0].style.height == '' || o.forceHelperSize) helper.height(this.currentItem.height()); return helper; }, _adjustOffsetFromHelper: function(obj) { if (obj.left != undefined) this.offset.click.left = obj.left + this.margins.left; if (obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left; if (obj.top != undefined) this.offset.click.top = obj.top + this.margins.top; if (obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top; }, _getParentOffset: function() { //Get the offsetParent and cache its position this.offsetParent = this.helper.offsetParent(); var po = this.offsetParent.offset(); // This is a special case where we need to modify a offset calculated on start, since the following happened: // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag if (this.cssPosition == 'absolute' && this.scrollParent[0] != document && jQ.ui.contains(this.scrollParent[0], this.offsetParent[0])) { po.left += this.scrollParent.scrollLeft(); po.top += this.scrollParent.scrollTop(); } if ((this.offsetParent[0] == document.body) //This needs to be actually done for all browsers, since pageX/pageY includes this information || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == 'html' && jQ.browser.msie)) //Ugly IE fix po = { top: 0, left: 0 }; return { top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"), 10) || 0), left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"), 10) || 0) }; }, _getRelativeOffset: function() { if (this.cssPosition == "relative") { var p = this.currentItem.position(); return { top: p.top - (parseInt(this.helper.css("top"), 10) || 0) + this.scrollParent.scrollTop(), left: p.left - (parseInt(this.helper.css("left"), 10) || 0) + this.scrollParent.scrollLeft() }; } else { return { top: 0, left: 0 }; } }, _cacheMargins: function() { this.margins = { left: (parseInt(this.currentItem.css("marginLeft"), 10) || 0), top: (parseInt(this.currentItem.css("marginTop"), 10) || 0) }; }, _cacheHelperProportions: function() { this.helperProportions = { width: this.helper.outerWidth(), height: this.helper.outerHeight() }; }, _setContainment: function() { var o = this.options; if (o.containment == 'parent') o.containment = this.helper[0].parentNode; if (o.containment == 'document' || o.containment == 'window') this.containment = [ 0 - this.offset.relative.left - this.offset.parent.left, 0 - this.offset.relative.top - this.offset.parent.top, jQ(o.containment == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left, (jQ(o.containment == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top ]; if (!(/^(document|window|parent)jQ/).test(o.containment)) { var ce = jQ(o.containment)[0]; var co = jQ(o.containment).offset(); var over = (jQ(ce).css("overflow") != 'hidden'); this.containment = [ co.left + (parseInt(jQ(ce).css("borderLeftWidth"), 10) || 0) + (parseInt(jQ(ce).css("paddingLeft"), 10) || 0) - this.margins.left, co.top + (parseInt(jQ(ce).css("borderTopWidth"), 10) || 0) + (parseInt(jQ(ce).css("paddingTop"), 10) || 0) - this.margins.top, co.left + (over ? Math.max(ce.scrollWidth, ce.offsetWidth) : ce.offsetWidth) - (parseInt(jQ(ce).css("borderLeftWidth"), 10) || 0) - (parseInt(jQ(ce).css("paddingRight"), 10) || 0) - this.helperProportions.width - this.margins.left, co.top + (over ? Math.max(ce.scrollHeight, ce.offsetHeight) : ce.offsetHeight) - (parseInt(jQ(ce).css("borderTopWidth"), 10) || 0) - (parseInt(jQ(ce).css("paddingBottom"), 10) || 0) - this.helperProportions.height - this.margins.top ]; } }, _convertPositionTo: function(d, pos) { if (!pos) pos = this.position; var mod = d == "absolute" ? 1 : -1; var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && jQ.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); return { top: ( pos.top // The absolute mouse position + this.offset.relative.top * mod // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.parent.top * mod // The offsetParent's offset without borders (offset + border) - (jQ.browser.safari && this.cssPosition == 'fixed' ? 0 : (this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : (scrollIsRootNode ? 0 : scroll.scrollTop())) * mod) ), left: ( pos.left // The absolute mouse position + this.offset.relative.left * mod // Only for relative positioned nodes: Relative offset from element to offset parent + this.offset.parent.left * mod // The offsetParent's offset without borders (offset + border) - (jQ.browser.safari && this.cssPosition == 'fixed' ? 0 : (this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft()) * mod) ) }; }, _generatePosition: function(event) { var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && jQ.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); // This is another very weird special case that only happens for relative elements: // 1. If the css position is relative // 2. and the scroll parent is the document or similar to the offset parent // we have to refresh the relative offset during the scroll so there are no jumps if (this.cssPosition == 'relative' && !(this.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])) { this.offset.relative = this._getRelativeOffset(); } var pageX = event.pageX; var pageY = event.pageY; /* * - Position constraining - * Constrain the position to a mix of grid, containment. */ if (this.originalPosition) { //If we are not dragging yet, we won't check for options if (this.containment) { if (event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left; if (event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top; if (event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left; if (event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top; } if (o.grid) { var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1]; pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : (!(top - this.offset.click.top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0]; pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : (!(left - this.offset.click.left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; } } return { top: ( pageY // The absolute mouse position - this.offset.click.top // Click offset (relative to the element) - this.offset.relative.top // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.top // The offsetParent's offset without borders (offset + border) + (jQ.browser.safari && this.cssPosition == 'fixed' ? 0 : (this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : (scrollIsRootNode ? 0 : scroll.scrollTop()))) ), left: ( pageX // The absolute mouse position - this.offset.click.left // Click offset (relative to the element) - this.offset.relative.left // Only for relative positioned nodes: Relative offset from element to offset parent - this.offset.parent.left // The offsetParent's offset without borders (offset + border) + (jQ.browser.safari && this.cssPosition == 'fixed' ? 0 : (this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft())) ) }; }, _rearrange: function(event, i, a, hardRefresh) { var haschildNode = this._hasChildNodes(i.item); // do this if is if (this.options.nested && this.error) { if (this._storedCursor) jQ('body').css("cursor", this._storedCursor); this.error = false; } if (!this.options.nested) { 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)); } else { var level = this._getLevel(i.item); var childlevels = this._getChildLevels(this.helper); // aantal items op deze level if (this.options.maxLevels <= level + childlevels) { if (this.error != true) { this._storedCursor = jQ('body').css("cursor"); jQ('body').css("cursor", "not-allowed"); //Reset cursor this.error = true; } } else { if (!jQ.ui.isOverAxis(this.positionAbs.left, i.left, i.width)) { if (this.options.maxItems.length <= level - 1 || (i.item.closest(this.options.nested).children(this.options.items).not(".ui-sortable-helper,.ui-sortable-placeholder").length < this.options.maxItems[level - 1])) { // als maxitems niet berijkt voor level 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)); } else { this._storedCursor = jQ('body').css("cursor"); jQ('body').css("cursor", "not-allowed"); //Reset cursor this.error = true; } } else { if (i.item.find(this.options.nested).siblings().length <= 0) { var element = document.createElement(this.options.nested); i.item.append(jQ(element)); } if (this.options.maxItems.length <= level || (i.item.children(this.options.nested).children(this.options.items).not(".ui-sortable-helper,.ui-sortable-placeholder").length < this.options.maxItems[level])) { //i.item.find(this.options.nested)[0].appendChild(this.placeholder[0],i.item.find(this.options.nested)[0].firstChild); i.item.find(this.options.nested)[0].insertBefore(this.placeholder[0], i.item.find(this.options.nested)[0].firstChild); } else { this._storedCursor = jQ('body').css("cursor"); jQ('body').css("cursor", "not-allowed"); //Reset cursor this.error = true; } } } //a ? a[0].appendChild(this.placeholder[0]) } //Various things done here to improve the performance: // 1. we create a setTimeout, that calls refreshPositions // 2. on the instance, we have a counter variable, that get's higher after every append // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same // 4. this lets only the last addition to the timeout stack through this.counter = this.counter ? ++this.counter : 1; var self = this, counter = this.counter; window.setTimeout(function() { if (counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove }, 0); }, /*b-hind function : get level from element */ _getLevel: function(item) { var level = 1; if (this.options.nested) { var list = item.closest(this.options.nested); //.ui-sortable while (!list.is(".ui-sortable") && level < this.options.maxLevels) { level++; list = list.parent().closest(this.options.nested); } } return level; }, _getChildLevels: function(item) { levels = item.find(this.options.items).filter(this.options.items + ":first-child").length; return levels; }, _getItemsOnLevel: function(item) { //console.log(item.closest(this.options.nested).html()) return item.closest(this.options.nested).children(this.options.items).not('.ui-sortable-placeholder').length; }, _hasChildNodes: function(item) { if (this.options.nested) { if (item.find(this.options.nested) && item.find(this.options.nested).children(this.options.items).length > 0) { return true; } else { return false; } } }, _clear: function(event, noPropagation) { this.reverting = false; // We delay all events that have to be triggered to after the point where the placeholder has been removed and // everything else normalized again var delayedTriggers = [], self = this; // We first have to update the dom position of the actual currentItem // Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088) if (!this._noFinalSort && this.currentItem[0].parentNode) this.placeholder.before(this.currentItem); this._noFinalSort = null; if (this.helper[0] == this.currentItem[0]) { for (var i in this._storedCSS) { if (this._storedCSS[i] == 'auto' || this._storedCSS[i] == 'static') this._storedCSS[i] = ''; } this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); } else { this.currentItem.show(); } if (this.fromOutside && !noPropagation) delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); }); if ((this.fromOutside || this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) && !noPropagation) delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed if (!jQ.ui.contains(this.element[0], this.currentItem[0])) { //Node was moved out of the current element if (!noPropagation) delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); }); for (var i = this.containers.length - 1; i >= 0; i--) { if (jQ.ui.contains(this.containers[i].element[0], this.currentItem[0]) && !noPropagation) { delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.containers[i])); delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.containers[i])); } }; }; //Post events to containers for (var i = this.containers.length - 1; i >= 0; i--) { if (!noPropagation) delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); }; }).call(this, this.containers[i])); if (this.containers[i].containerCache.over) { delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); }; }).call(this, this.containers[i])); this.containers[i].containerCache.over = 0; } } //Do what was originally in plugins if (this._storedCursor) jQ('body').css("cursor", this._storedCursor); //Reset cursor if (this._storedOpacity) this.helper.css("opacity", this._storedOpacity); //Reset cursor if (this._storedZIndex) this.helper.css("zIndex", this._storedZIndex == 'auto' ? '' : this._storedZIndex); //Reset z-index this.dragging = false; if (this.cancelHelperRemoval) { if (!noPropagation) { this._trigger("beforeStop", event, this._uiHash()); for (var i = 0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events this._trigger("stop", event, this._uiHash()); } return false; } if (!noPropagation) this._trigger("beforeStop", event, this._uiHash()); //jQ(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! this.placeholder[0].parentNode.removeChild(this.placeholder[0]); if (this.helper[0] != this.currentItem[0]) this.helper.remove(); this.helper = null; if (!noPropagation) { for (var i = 0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events this._trigger("stop", event, this._uiHash()); } //b-hind clear empty nested elements if (this.options.nested) { this.element.find(this.options.nested + ":empty").remove(); } this.fromOutside = false; return true; }, _trigger: function() { if (jQ.widget.prototype._trigger.apply(this, arguments) === false) { this.cancel(); } }, _uiHash: function(inst) { var self = inst || this; return { helper: self.helper, placeholder: self.placeholder || jQ([]), position: self.position, absolutePosition: self.positionAbs, //deprecated offset: self.positionAbs, item: self.currentItem, sender: inst ? inst.element : null }; } })); jQ.extend(jQ.ui.sortable, { getter: "serialize toArray", version: "1.7.2", eventPrefix: "sort", defaults: { appendTo: "parent", axis: false, cancel: ":input,option", connectWith: false, containment: false, cursor: 'auto', cursorAt: false, delay: 0, distance: 1, dropOnEmpty: true, forcePlaceholderSize: false, forceHelperSize: false, grid: false, handle: false, helper: "original", items: '> *', opacity: false, placeholder: false, revert: false, scroll: true, scrollSensitivity: 20, scrollSpeed: 20, scope: "default", tolerance: "intersect", zIndex: 1000, nested: false, maxLevels: 100, maxItems: [] } }); })(jQuery);