Jquery draggables：要素を削除すると、他のドロップされた要素の位置が変更されます

Question

要素が配置/ドロップされると（ドロップされた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', 
     }); 

私はこの問題を回避するにはどうすればよいですか？

要素が開始位置の相対位置に配置されていることがわかりました。たとえ一部が削除されても、落とした位置にそれらを貼り付けることができますか？

は、私は2つの近くに同様の質問を見つけましたが、満足のいく答えなし：

Remove in Jquery divs with draggables and resizables

jQuery draggable removing without changing position of other elements

Answer 1

あなたはあなたの要素がabsoluteを配置する必要があります。削除されたボックスは他の要素のフローに影響を与えません。

あなたは彼らにabsoluteを配置するためにCSSを使用することができます。

.d { 
    width: 50px; 
    height: 50px; 
    margin: 10px; 
    display: inline-block; 
    position: 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

私はちょうど作られたいくつかの編集のトリックは、彼らがstatic（.draggable()後またはrelativeが行われます）位置のままにして、その位置を設定するためにJavaScriptを使用してabsolute位置にそれらを設定することです

<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> 

：とあなたのjsFiddleのデモでは

私の編集の作業をしているように見えました

と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;}