javascript - jQuery draggable / sortable on dynamically-created elements -

after blood, sweat , luckily no tears i've managed create drag , drop system fits needs.

there 2 things triggering tears...

here's jsfiddle

the problem in these lines of code, 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 explanation , goal:

there 5 days , on default placeholders dynamicly increase number of days. if max limit of placeholders filled, 1 appended. now, after not-default placeholder appended , delete previous filled placeholder, can't allow droppable again.

difficult explain, see demo above ^

extra: able drag items between placeholders. can't find way either.

thanks help!

you don't seem reactivate droppable on delete. , also, destroy them on drop might make need recreate them. use disable on drop , enable when deleting. 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/