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
   }

});