jQuery可堆叠不适用于动态创建的可拖动元素

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
   }

});