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

Question

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

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

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

Если вы перетащите панель из правой колонки, панель появится в месте расположения следующей панели.

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

Чтобы увидеть проблему в действии, смотрите this jsfiddle (нажмите here to see it full size) и попробуйте перетащить панель, которая не находится в правой колонке над правом столбце. И попробуйте перетащить панель, чтобы был в правой колонке в любом месте.

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, Бутстрап 3.3.2

---

ответ обеспечивается @AlexStack (добавить прозрачную границу верхом друг <div>) почти есть, но не работает в current FireFox (36.0.1 во время тестирования/записи) ... такая же проблема возникает.

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

Answer 1

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

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

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

Answer 2

Попробуйте это:

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

Answer 3

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

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

margin-right:-1px; 

Answer 4

У меня было много проблем такого же типа, а также с некоторым крайней мерцанием, но я был в состоянии сделать эту работу в совершенстве канав 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>