Jquery 拖拽 : Removing an element changes position of other dropped elements

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',
      });

如何避免这种情况？

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

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

Remove in Jquery divs with draggables and resizables

jQuery draggable removing without changing position of other elements

Answer 1

您需要将元素定位为绝对。那么被删除的盒子就不会影响其他元素的流动。

你可以使用 css 来定位它们绝对:

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

但是这样你就必须手动放置每个盒子。诀窍是让它们保持静态定位(或在 .draggable() 完成后相对定位)，然后使用 javascript 设置它们的位置并设置他们到绝对定位:

$('.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/