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。而且，destroy上的drop可能會使您需要重新創建它們。刪除時可以使用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/