У меня есть отсортированный список jQueryUI, который содержит три панели bootstrap
, панели 1 и 2 начинают перетаскивание с правильными начальными положениями, однако всякий раз, когда вы пытаетесь перетащить панель 3, она падает под панелью 1 смещением от курсора. Живая демонстрация
HTML
<ul id="sortable">
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">1</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">2</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">3</div>
<div class="panel-body"></div>
</div>
</li>
</ul>
JavaScript
$('#sortable').sortable({
tolerance: 'pointer',
handle: '.panel-heading',
placeholder: 'col-xs-4 panel-al-placeholder',
start: function (e, ui) {
ui.placeholder.height(ui.item.children().height());
}
});
CSS
ul {
width: 650px;
list-style: none;
padding: 0;
margin: 0;
}
.panel-al-placeholder {
margin-bottom: 18px;
border:2px solid #f8e287;
background:#fef9e7
}