Странное поведение при перетаскивании отсортированных панелей Bootstrap с пользовательским интерфейсом jQuery

Я получаю свои зубы в jQuery UI и Bootstrap, и я пытаюсь реализовать перетаскиваемые/сортируемые панели, которые почти работают.

Я использую модель container (вместо container-fluid), и у меня есть несколько панелей. Панели настраиваются для распространения по разным столбцам в зависимости от размера экрана.

Перетаскивание панели с не в правом столбце перемещает панель с помощью мыши, а заполнитель перемещается под мышью , если не перемещать ее по правому краю самая колонка.

Если вы перетащите панель из самого правого столбца, панель появится в панели next.

Кто-нибудь может объяснить, почему это происходит, и как я могу заставить его работать так, как надо, - я должен уметь перетаскивать любую панель и размещать ее в любом месте?

Чтобы увидеть проблему в действии, см. этот jsfiddle (нажмите здесь, чтобы увидеть его в полном размере) и попробуйте перетащить панель, в которой не в правом столбце, в правый столбец. И попробуйте перетащить панель, в которой находится, в правом столбце.

HTML настраивается следующим образом (показаны только первые две панели)...

<div class="container">
  <div id="sortable" class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading">Test 1</div>
            <div class="panel-body">Content</div>
        </div>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading">Test 2</div>
            <div class="panel-body">Content</div>
        </div>
    </div>
    ...
  </div>
</div>

jQuery настроен как...

$(function () {
    $("#sortable").sortable().disableSelection();
});

Я использую jQuery 1.11.2, jQuery UI 1.10.3, Bootstrap 3.3.2

Ответ, предоставленный @AlexStack (для добавления прозрачного пограничного элемента к каждому <div>), почти существует, но не работает в текущем FireFox (36.0.1 во время тестирования/записи)... такая же проблема возникает.

Кто-нибудь знает решение, которое охватывает все основные браузеры?

Ответы

Ответ 1

Кажется, это ошибка jQuery UI (или Bootstrap, я не уверен, какой). Но добавление невидимой границы устраняет проблему:

#sortable > div {
    border-top: 1px solid transparent;
}

Вы можете увидеть решение в этой скрипте: http://jsfiddle.net/L6vnjhsp/2/

Ответ 2

У меня была аналогичная проблема, и я использовал простой обходной путь в css.

Здесь обновлено fiddle

margin-right:-1px;

Ответ 3

У меня было много проблем такого же типа, а также с некоторым крайним мерцанием, но я смог сделать эту работу отлично, отбросив элементы col-md-* и перейдя вместо списка, поскольку пример сортировки JQuery UI включен их сайт. http://jqueryui.com/sortable/#display-grid

<style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
    #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>    
<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
</ul>
<script>
    $( "#sortable" ).sortable();
</script>

Ответ 4

Попробуйте следующее:

#sortable > div {
    border-top: 1px solid rgba(255,255,255,0);
}