sortable,draggable: made connectToSortable work again, now works with multiple sortables (closes #2785)

2 files changed, 112 insertions, 87 deletions

diff --git a/ui/source/ui.draggable.js b/ui/source/ui.draggable.js
index ac74ae00a..746326d04 100644
--- a/ui/source/ui.draggable.js
+++ b/ui/source/ui.draggable.js
@@ -423,89 +423,115 @@
 	

 	$.ui.plugin.add("draggable", "connectToSortable", {

 		start: function(e,ui) {

+			

 			var inst = $(this).data("draggable");

-			inst.sortable = $.data($(ui.options.connectToSortable)[0], 'sortable');

-			inst.sortableOffset = inst.sortable.element.offset();

-			inst.sortableOuterWidth = inst.sortable.element.outerWidth();

-			inst.sortableOuterHeight = inst.sortable.element.outerHeight();

-			if(inst.sortable.options.revert) inst.sortable.shouldRevert = true;

+			inst.sortables = [];

+			$(ui.options.connectToSortable).each(function() {

+				if($.data(this, 'sortable')) inst.sortables.push({

+					instance: $.data(this, 'sortable'),

+					offset: $.data(this, 'sortable').element.offset(),

+					width: $.data(this, 'sortable').element.width(),

+					height: $.data(this, 'sortable').element.height(),

+					shouldRevert: $.data(this, 'sortable').options.revert

+				});

+			});

+

 		},

 		stop: function(e,ui) {

+			

 			//If we are still over the sortable, we fake the stop event of the sortable, but also remove helper

-			var instDraggable = $(this).data("draggable");

-			var inst = instDraggable.sortable;

-			

-			if(inst.isOver) {

-				inst.isOver = 0;

-				instDraggable.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance

-				inst.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)

-				if(inst.shouldRevert) inst.options.revert = true; //revert here

-				inst.stop(e);

-				inst.options.helper = "original";

-			}

+			var inst = $(this).data("draggable");

+			

+			$.each(inst.sortables, function() {

+				if(this.instance.isOver) {

+					this.instance.isOver = 0;

+					inst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance

+					this.instance.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)

+					if(this.shouldRevert) this.instance.options.revert = true; //revert here

+					this.instance.mouseStop(e);

+					this.instance.options.helper = "original";

+				}

+			});

+			

 		},

 		drag: function(e,ui) {

+

 			//This is handy: We reuse the intersectsWith method for checking if the current draggable helper

 			//intersects with the sortable container

-			var instDraggable = $(this).data("draggable");

-			var inst = instDraggable.sortable;

-			instDraggable.position.absolute = ui.absolutePosition; //Sorry, this is an ugly API fix

-			

-			if(inst.intersectsWith.call(instDraggable, {

-				left: instDraggable.sortableOffset.left, top: instDraggable.sortableOffset.top,

-				width: instDraggable.sortableOuterWidth, height: instDraggable.sortableOuterHeight

-			})) {

-				//If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once

-				if(!inst.isOver) {

-					inst.isOver = 1;

+			var inst = $(this).data("draggable"), self = this;

+			inst.position.absolute = ui.absolutePosition; //Sorry, this is an ugly API fix

+			

+			var checkPos = function(o) {

 					

-					//Cache the width/height of the new helper

-					var height = inst.options.placeholderElement ? $(inst.options.placeholderElement, $(inst.options.items, inst.element)).innerHeight() : $(inst.options.items, inst.element).innerHeight();

-					var width = inst.options.placeholderElement ? $(inst.options.placeholderElement, $(inst.options.items, inst.element)).innerWidth() : $(inst.options.items, inst.element).innerWidth();

+				var l = o.left, r = l + o.width,

+					t = o.top, b = t + o.height;

 					

-					//Now we fake the start of dragging for the sortable instance,

-					//by cloning the list group item, appending it to the sortable and using it as inst.currentItem

-					//We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)

-					inst.currentItem = $(this).clone().appendTo(inst.element);

-					inst.options.helper = function() { return ui.helper[0]; };

-					inst.start(e);

+				return (l < (this.position.absolute.left + this.offset.click.left) && (this.position.absolute.left + this.offset.click.left) < r

+						&& t < (this.position.absolute.top + this.offset.click.top) && (this.position.absolute.top + this.offset.click.top) < b);				

+			};

+			

+			$.each(inst.sortables, function() {

+

+				if(checkPos.call(inst, {

+					left: this.offset.left, top: this.offset.top,

+					width: this.width, height: this.height

+				})) {

+					//If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once

+					if(!this.instance.isOver) {

+						this.instance.isOver = 1;

+

+						//Cache the width/height of the new helper

+						var height = this.instance.options.placeholderElement ? $(this.instance.options.placeholderElement, $(this.instance.options.items, this.instance.element)).innerHeight() : $(this.instance.options.items, this.instance.element).innerHeight();

+						var width = this.instance.options.placeholderElement ? $(this.instance.options.placeholderElement, $(this.instance.options.items, this.instance.element)).innerWidth() : $(this.instance.options.items, this.instance.element).innerWidth();

 					

-					//Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes

-					inst.clickOffset.top = instDraggable.offset.click.top;

-					inst.clickOffset.left = instDraggable.offset.click.left;

-					inst.offset.left -= ui.absolutePosition.left - inst.position.absolute.left;

-					inst.offset.top -= ui.absolutePosition.top - inst.position.absolute.top;

+						//Now we fake the start of dragging for the sortable instance,

+						//by cloning the list group item, appending it to the sortable and using it as inst.currentItem

+						//We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)

+						this.instance.currentItem = $(self).clone().appendTo(this.instance.element).data("sortable-item", true);

+						this.instance.options.helper = function() { return ui.helper[0]; };

 					

-					//Do a nifty little helper animation: Animate it to the portlet's size (just takes the first 'li' element in the sortable now)

-					inst.helperProportions = {width: width, height: height}; //We have to reset the helper proportions, because we are doing our animation there

-					ui.helper.animate({height: height, width: width}, 500);

-					instDraggable.propagate("toSortable", e);

-				

-				}

-				

-				//Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable

-				if(inst.currentItem) inst.drag(e);

-				

-			} else {

-				

-				//If it doesn't intersect with the sortable, and it intersected before,

-				//we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval

-				if(inst.isOver) {

-					inst.isOver = 0;

-					inst.cancelHelperRemoval = true;

-					inst.options.revert = false; //No revert here

-					inst.stop(e);

-					inst.options.helper = "original";

+						e.target = this.instance.currentItem[0];

+						this.instance.mouseStart(e, true);

+

+						//Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes

+						this.instance.clickOffset.top = inst.offset.click.top;

+						this.instance.clickOffset.left = inst.offset.click.left;

+						this.instance.offset.left -= ui.absolutePosition.left - this.instance.position.absolute.left;

+						this.instance.offset.top -= ui.absolutePosition.top - this.instance.position.absolute.top;

+						

+						//Do a nifty little helper animation: Animate it to the portlet's size (just takes the first 'li' element in the sortable now)

+						this.instance.helperProportions = {width: width, height: height}; //We have to reset the helper proportions, because we are doing our animation there

+						ui.helper.animate({height: height, width: width}, 500);

+						inst.propagate("toSortable", e);

 					

-					//Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size

-					inst.currentItem.remove();

-					inst.placeholder.remove();

+					}

 					

-					ui.helper.animate({ height: this.innerHeight(), width: this.innerWidth() }, 500);

-					instDraggable.propagate("fromSortable", e);

-				}

-				

-			};

+					//Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable

+					if(this.instance.currentItem) this.instance.mouseDrag(e);

+					

+				} else {

+					

+					//If it doesn't intersect with the sortable, and it intersected before,

+					//we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval

+					if(this.instance.isOver) {

+						this.instance.isOver = 0;

+						this.instance.cancelHelperRemoval = true;

+						this.instance.options.revert = false; //No revert here

+						this.instance.mouseStop(e);

+						this.instance.options.helper = "original";

+						

+						//Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size

+						this.instance.currentItem.remove();

+						this.instance.placeholder.remove();

+						

+						ui.helper.animate({ height: self.innerHeight(), width: self.innerWidth() }, 500);

+						inst.propagate("fromSortable", e);

+					}

+					

+				};

+

+			});

+

 		}

 	});

 	

diff --git a/ui/source/ui.sortable.js b/ui/source/ui.sortable.js
index 8d9c7822d..4c5e00d35 100644
--- a/ui/source/ui.sortable.js
+++ b/ui/source/ui.sortable.js
@@ -280,8 +280,8 @@
 				

 			};			

 		},

-		mouseStart: function(e) {

-			

+		mouseStart: function(e, overrideHandle) {

+		

 			var o = this.options;

 			this.currentContainer = this;

 			

@@ -295,9 +295,9 @@
 				}

 			});

 			if($.data(e.target, 'sortable-item')) currentItem = $(e.target);

-			

-			if(!currentItem) return false;	

-			if(this.options.handle) {

+		

+			if(!currentItem) return false;

+			if(this.options.handle && !overrideHandle) {

 				var validHandle = false;

 				$(this.options.handle, currentItem).each(function() { if(this == e.target) validHandle = true; });

 				if(!validHandle) return false;

@@ -330,7 +330,7 @@
 			//The relative click offset

 			this.offsets.parent = this.offsetParent.offset();

 			this.clickOffset = { left: e.pageX - this.offsets.absolute.left, top: e.pageY - this.offsets.absolute.top };

-			

+		

 			this.originalPosition = {

 				left: this.offsets.absolute.left - this.offsets.parent.left - this.margins.left,

 				top: this.offsets.absolute.top - this.offsets.parent.top - this.margins.top

@@ -512,14 +512,14 @@
 

 	$.ui.plugin.add("sortable", "revert", {

 		stop: function(e, ui) {

-			var self = ui.instance;

+			var self = this.data("sortable");

 			self.cancelHelperRemoval = true;

 			var cur = self.currentItem.offset();

 			var op = self.helper.offsetParent().offset();

-			if(ui.instance.options.zIndex) ui.helper.css('zIndex', ui.instance.options.zIndex); //Do the zIndex again because it already was resetted by the plugin above on stop

+			if(self.options.zIndex) ui.helper.css('zIndex', self.options.zIndex); //Do the zIndex again because it already was resetted by the plugin above on stop

 

 			//Also animate the placeholder if we have one

-			if(ui.instance.placeholder) ui.instance.placeholder.animate({ opacity: 'hide' }, parseInt(ui.options.revert, 10) || 500);

+			if(self.placeholder) self.placeholder.animate({ opacity: 'hide' }, parseInt(ui.options.revert, 10) || 500);

 			

 			

 			ui.helper.animate({

@@ -595,35 +595,35 @@
 

 	$.ui.plugin.add("sortable", "axis", {

 		sort: function(e, ui) {

-			var o = ui.options;

+			var o = ui.options, inst = this.data("sortable");

 			if(o.constraint) o.axis = o.constraint; //Legacy check

-			o.axis == 'x' ? ui.instance.position.current.top = ui.instance.originalPosition.top : ui.instance.position.current.left = ui.instance.originalPosition.left;

+			o.axis == 'x' ? inst.position.current.top = inst.originalPosition.top : inst.position.current.left = inst.originalPosition.left;

 		}

 	});

 

 	$.ui.plugin.add("sortable", "scroll", {

 		start: function(e, ui) {

-			var o = ui.options;

+			var o = ui.options, inst = this.data("sortable");

 			o.scrollSensitivity	= o.scrollSensitivity || 20;

 			o.scrollSpeed		= o.scrollSpeed || 20;

 

-			ui.instance.overflowY = function(el) {

+			inst.overflowY = function(el) {

 				do { if((/auto|scroll/).test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-y'))) return el; el = el.parent(); } while (el[0].parentNode);

 				return $(document);

 			}(this);

-			ui.instance.overflowX = function(el) {

+			inst.overflowX = function(el) {

 				do { if((/auto|scroll/).test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-x'))) return el; el = el.parent(); } while (el[0].parentNode);

 				return $(document);

 			}(this);

 			

-			if(ui.instance.overflowY[0] != document && ui.instance.overflowY[0].tagName != 'HTML') ui.instance.overflowYstart = ui.instance.overflowY[0].scrollTop;

-			if(ui.instance.overflowX[0] != document && ui.instance.overflowX[0].tagName != 'HTML') ui.instance.overflowXstart = ui.instance.overflowX[0].scrollLeft;

+			if(inst.overflowY[0] != document && inst.overflowY[0].tagName != 'HTML') inst.overflowYstart = inst.overflowY[0].scrollTop;

+			if(inst.overflowX[0] != document && inst.overflowX[0].tagName != 'HTML') inst.overflowXstart = inst.overflowX[0].scrollLeft;

 			

 		},

 		sort: function(e, ui) {

 			

 			var o = ui.options;

-			var i = ui.instance;

+			var i = this.data("sortable");

 

 			if(i.overflowY[0] != document && i.overflowY[0].tagName != 'HTML') {

 				if(i.overflowY[0].offsetHeight - (ui.position.top - i.overflowY[0].scrollTop + i.clickOffset.top) < o.scrollSensitivity)

@@ -650,7 +650,6 @@
 					$(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);

 			}

 			

-			//ui.instance.recallOffset(e);

 			i.offset = {

 				left: i.mouse.start.left - i.originalPosition.left + (i.overflowXstart !== undefined ? i.overflowXstart - i.overflowX[0].scrollLeft : 0),

 				top: i.mouse.start.top - i.originalPosition.top + (i.overflowYstart !== undefined ? i.overflowYstart - i.overflowX[0].scrollTop : 0)