I've got a scenario where I have multiple droppable
containers, that are also sortable
. I need to be able to drag clone
s 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:
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 sourcedraggable
up top. I assume this has something to do with the clone but I wasn't able to find the culprit.With the two items on the first (left-most)
droppable
container, if you try and drag one of the items over to the middledroppable
, you see it revert again animate back from the sourcedraggable
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?