jQuery可動態創建的元素可拖動/可排序

Question

經過一番血，汗，幸運沒有眼淚，我設法創造了一個符合我需要的拖放系統。

只有兩件事幾乎引發了我的眼淚......

這是jsfiddle

問題在於這些代碼行，但無法找到它：

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();

});

所以現在解釋和我的目標：

有5天，默認情況下，占位符將隨着天數的增加而動態增加。 如果填充了占位符的最大限制，則將追加另一個。 現在，在附加了非默認占位符並刪除之前填充的占位符后，我不能再允許它可以放置。

很難解釋，但看到上面的演示^

額外 ：我希望能夠在這些占位符之間拖動項目。 但也找不到辦法。

謝謝您的幫助！

Answer 1

您似乎沒有重新激活刪除時的droppable 。 而且，在drop上destroy它們可能會讓你需要重新創建它們。 你可以使用disable的下降和enable時刪除。 像這樣：

drop: function (event, ui) {
   var dragging = ui.draggable.clone().find("img").remove();
   $(this).append(dragging).addClass("dropped");
    $(this).droppable('disable');

然后：

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/