JQuery drag / drop / sort by dynamically created elements
After some blood, sweat and thankfully no tears, I was able to create a drag system that suits my needs.
There are only two things that almost make me cry ...
Here's the jsfiddle
The problem is with these lines of code, but can't find it:
if (dropped === original) {
$("#dropzone").append('<li class="placeholder" data-id="" data-order="" data-content=""></li>');
init();
}
$(".remove").click(function() {
var removable = $(this).parent();
if (dropped > original) {
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
init();
});
So now the explanation and my goal:
There are 5 days and by default the placeholders will dynamically increase with the number of days. If the maximum placeholder limit is full, another one will be added. Now, after adding the custom placeholder and removing the previous filled placeholder, I can't let it get dropped again.
Difficult to explain, but see demo above ^
Additionally . I would like to be able to drag and drop items between these placeholders. But also not find a way.
Thanks for the help!
source to share
You don't seem to activate droppable
on uninstall. And also, destroy
they drop
can't force you to recreate them. You can use disable
on delete and enable
on delete. Like this:
drop: function (event, ui) {
var dragging = ui.draggable.clone().find("img").remove();
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
And later:
if (dropped > original) {
$(this).parent().droppable('enable')
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
$(this).parent().droppable('enable');
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
source to share