Jquery draggables：删除元素会更改其他已删除元素的位置

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

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

主要代码：

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

我怎么能避免这个？

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

我找到了两个近乎相似的问题，但没有一个令人满意的答案：

使用draggables和resizables删除Jquery div

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

Answer 1

您需要将元素定位为absolute元素。 然后删除的框不会影响其他元素的流动。

您可以使用css将它们置于absolute位置：

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

但是你必须手动放置每个盒子。 诀窍是让它们保持static （或者在完成.draggable()之后relative ），然后使用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演示中进行了一些编辑，它似乎正在工作

我的编辑：

 
 
 
 
 
 
 
 Remove d1 Remove d2 Remove d3 Remove d4 

并在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;}