jQuery可拖动对象:删除元素会更改其他放置的元素的位置 [英] Jquery draggables: Removing an element changes position of other dropped elements

问题描述

放置/放置元素(通过从一个DIV拖动到另一个DIV)然后删除放置的DIV中的一个元素时，其中一些元素会改变位置.

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.

这是一个测试方案: 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',
      });

如何避免这种情况?

我发现，这些元素放置在相对于起始位置的相对位置.即使移除了一些物品，如何使它们粘在掉落的位置?

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:

在具有可拖动对象和可调整大小的对象的jQuery div中删除

可拖动的jQuery删除，而无需更改其他元素的位置

推荐答案

您需要将元素定位为absolute.这样，删除的框将不会影响其他元素的流程.

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

您可以使用CSS定位它们absolute:

You could just use css to position them absolute:

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

但是随后您将不得不手动放置每个盒子.诀窍是让它们定位为static(或在.draggable()完成后为relative)，然后使用javascript设置其位置并将其设置为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'});

演示: http://jsfiddle.net/jtbowden/5S92K/

这篇关于jQuery可拖动对象:删除元素会更改其他放置的元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！