Jquery draggables: удаление элемента меняет положение других удаленных элементов - PullRequest
Новая
       26

Jquery draggables: удаление элемента меняет положение других удаленных элементов

1 голос
/ 10 марта 2012

Когда элементы помещаются / удаляются (путем перетаскивания из одного 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',
      });

Как мне этого избежать?

Я обнаружил, что элементы расположены в относительном положении относительно начальной позиции.Как я могу заставить их держаться в опущенном положении, даже если некоторые из них удалены?

Я нашел два похожих вопроса, но без удовлетворительного ответа:

Удалить в Jquery div с помощью перетаскиваемыхи изменяемые размеры

jПросильное перетаскивание без изменения положения других элементов

Ответы [ 2 ]

4 голосов
/ 10 марта 2012

Ваши элементы должны быть расположены 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/

0 голосов
/ 10 марта 2012

Я только что внес некоторые изменения в вашу демоверсию 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;}
...