Question

When elements are placed / dropped (by dragging from one DIV to another) and then removing one in the dropped DIV, some of them are changing the position.

Here is a test scenario: http://jsfiddle.net/TcYHW/8/

And the main code:

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

How can I avoid this?

I found, that the elements are placed in relative position to the starting position. How can I make them stick at the dropped position even if some are removed?

I found two near similar questions, but without an satisfying answer:

Remove in Jquery divs with draggables and resizables

jQuery draggable removing without changing position of other elements

Answer 1

You need your elements to be positioned absolute. Then the deleted boxes won’t affect the flow of the other elements.

You could just use css to position them absolute:

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

But then you would have to manually place each box. The trick is to leave them positioned static (or relative after .draggable() gets done) and then use javascript to set their positions and set them to absolute positioning:

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

Demo: http://jsfiddle.net/jtbowden/5S92K/