JQueryUI Sortable Item Неправильное положение при перетаскивании

У меня есть отсортированный список jQueryUI, который содержит три панели bootstrap, панели 1 и 2 начинают перетаскивание с правильными начальными положениями, однако всякий раз, когда вы пытаетесь перетащить панель 3, она падает под панелью 1 смещением от курсора. Живая демонстрация

HTML

JavaScript

CSS

Ответы

Ответ 1

У меня была аналогичная проблема, установив для меня режим помощника клонов:

$('#sortable').sortable({
    helper: 'clone'
});

Ответ 2

У меня была та же проблема. В прошлом я нашел, что стиль CSS box-sizing: border-box;, который загружает bootstrap, может вызвать проблемы с некоторыми библиотеками javascript, и, насколько мне известно, это оказалось проблемой в этом случае. Я придумал быстрое исправление, которое устанавливает размер окна обратно в CSS2 по умолчанию box-sizing: content-box; для столбцов.

К сожалению, это приводит к хаосу с расположением столбцов в бутстрапе, потому что добавление столбцов теперь добавляется к процентной ширине, поэтому наши 3 столбца в итоге превышают 100%. Для моего кода я действительно не нуждался в заполнении между моими столбцами, поэтому я просто устанавливал отрицательный запас на своих столбцах, чтобы компенсировать дополнительную ширину.

Дополнительные сведения о CSS-атрибуте CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Живая демонстрация

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',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-xs-4 {
    box-sizing: content-box;
    margin: 10px -16px;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    background:#fef9e7
}