CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jeroen Bellemans
Jeroen Bellemans

Reputation: 2035

jQuery draggable / sortable on dynamically-created elements

After some blood, sweat and luckily no tears I've managed to create a drag and drop system which fits my needs.

There are only 2 things that are almost triggering my tears...

Here's the jsfiddle

The problem is in 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 on default the placeholders will dynamicly increase with the number of days. If the max limit of placeholders is filled, another one will be appended. Now, after the not-default placeholder is appended and I delete a previous filled placeholder, I can't allow it to be droppable again.

Difficult to explain, but see the demo above ^

Extra: I would like to be able to drag items between those placeholders. But can't find a way either.

Thanks for the help!

Upvotes: 3

Views: 884

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17114

You don't seem to reactivate the droppable on delete. And also, destroy them on drop might make you need to recreate them. You could use disable on drop and enable when deleting. 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");
    }

http://jsfiddle.net/opmd46t2/3/

Upvotes: 2

Related Questions