move draggable between droppable + sortable containers

Question

I've got a scenario where I have multiple droppable containers, that are also sortable. I need to be able to drag clones from my source draggable, and drop them on any of the droppables. Within each droppable, the items need to be sortable. I also need to be able to drag a draggable from one droppable to another.

Here is a JSFiddle I've started as a proof of concept that I can't quite get working.

There are two issues I can see:

1. If you drag two items onto the first (left-most) droppable container, and then drag the bottom one up to the top (to re-sort them), you'll notice an animation coming from the source draggable up top. I assume this has something to do with the clone but I wasn't able to find the culprit.

2. With the two items on the first (left-most) droppable container, if you try and drag one of the items over to the middle droppable, you see it revert again animate back from the source draggable up top.

I hope I'm not making it overly complex but in the drop function I'm using the dropped class to tell me whether the item has been dropped or not before, and if it doesn't have the class I know it's the first time dropping , hence creating the clone and appending it to the droppable.

Otherwise, if the draggable has been dropped (i.e. has the class dropped), and changed droppables, I won't re-clone it but append it to the new droppable.

if(ui.draggable.hasClass("dropped") && DifferentSource()){
   // this item was already dropped, just changed sources:
   ui.draggable.appendTo($(this));
} else if(ui.draggable.hasClass("dropped") == false) {
   var clone = ui.draggable.clone();
   count += 1;
   clone.html("item " + count);
   clone.addClass("dropped");
   clone.appendTo($(this));
}

Can anyone see what I'm doing wrong?

Answer 1

The missing key was sortable's connectWith property. This allowed me to connect the different droppables so that sortable doesn't revert back when changing droppables.

Here is the working fiddle. Hopefully this saves someone time in the future!