Jquery draggables：删除一个元素会改变其他放置元素的位置

Question

当放置/放置元素（通过从一个 DIV 拖到另一个 DIV）然后在放置的 DIV 中移除一个元素时，其中一些正在改变位置。

这是一个测试场景：http : //jsfiddle.net/TcYHW/8/

和主要代码：

<div id="dropwin"></div>
<div id="dragables">
    <div id="d1" class="d"></div>
    <div id="d2" class="d"></div>
    <div id="d3" class="d"></div>
    <div id="d4" class="d"></div>
</div>


$(".d").draggable({
        containment: '#dropwin',
        stack: '#dragables div',
        cursor: 'move',
      });

我怎样才能避免这种情况？

我发现，元素被放置在相对于起始位置的位置。即使有一些被移除，我怎样才能让它们粘在掉落的位置？

我发现了两个几乎相似的问题，但没有令人满意的答案：

使用可拖动和可调整大小在 Jquery div 中删除

jQuery可拖动删除而不改变其他元素的位置

Answer 1

您需要定位您的元素absolute。那么被删除的框不会影响其他元素的流动。

你可以只使用 css 来定位它们absolute：

.d { 
    width: 50px;
    height: 50px;
    margin: 10px;
    display: inline-block;
    position: absolute;
}

但是你必须手动放置每个盒子。关键是给他们留下定位static（或relative之后.draggable()被完成），然后使用JavaScript来设置自己的位置，并将其设置为absolute定位：

$('.d').each(function() {
    var top = $(this).position().top + 'px';
    var left = $(this).position().left + 'px';
    $(this).css({top: top, left: left});
}).css({position: 'absolute'});

演示：http : //jsfiddle.net/jtbowden/5S92K/