jQuery Stackable在動態創建的可拖動元素上不起作用

Question

我正在運行時創建可拖動元素，並希望使其可堆疊。 每當我生成一個新的可拖動元素時，此代碼就會運行：

$('.draggable#Element' + ElementID).draggable({
    containment: "body",
    stack: "#draggables"
});

具有兩個生成元素的可拖動容器：

<div id="draggables">
    <div class="draggable" id="Element1"></div>
    <div class="draggable" id="Element2"></div>
</div>

我可以拖動每個元素。 容器也可以使用。

但是：不幸的是，如果我拖拽它，只有最后創建的元素會堆疊。 其他元素保留其z-index並保留在背景中。

每當創建新元素時，我也嘗試運行此代碼（與上面的代碼相同的結果）：

$('.draggable').each(function() {
    $(this).draggable({
        containment: "body",
        stack: "#draggables"
    });
});

還有這個：

$('.draggable').draggable({
    containment: "body",
    stack: "#draggables"
});

如何實現每個元素正確堆疊？

jsFiddle示例： https ：//jsfiddle.net/zurgs1zb/

Answer 1

檢查第一條評論。 並嘗試在初始化后刪除所有堆棧選項和聲明堆棧選項的運行時：

$('.draggable').each(function() {
if($(this).draggable( "option", "stack" ) == false) //if not already set
   {
$( $(this) ).draggable( "option", "stack", "#draggables" ); // set stack option
   }

});