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

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

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

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

Remove in Jquery divs with draggables and resizables

jQuery draggable removing without changing position of other elements

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/

Answer 2

我刚刚在您的 jsFiddle 演示中进行了一些编辑，它似乎可以正常工作

我的编辑：

<div id="dropwin"></div>
<div id="dragables">
<div class="outer"><div id="d1" class="d"></div></div>
<div class="outer"><div id="d2" class="d"></div></div>
<div class="outer"><div id="d3" class="d"></div></div>
<div class="outer"><div id="d4" class="d"></div></div>
</div>
<button id="b1">Remove d1</button>
<button id="b2">Remove d2</button>
<button id="b3">Remove d3</button>
<button id="b4">Remove d4</button>

在css中：

#dropwin { width: 300px; height: 300px; border: 1px solid #f00;}
#dragables { width: 300px; height: 70px; border: 1px solid #00f; }
.d { width: 50px; height: 50px; margin: 10px; display: inline-block; }
#d1 { background: #f00; position:absolute; }
#d2 { background: #ff0; position:absolute; }
#d3 { background: #f0f; position:absolute; }
#d4 { background: #0ff; position:absolute; }
.outer{ margin:1px 2px 0 0; float:left; width:60px;}