Предисловие

У меня проблема с неправильным смещением перетаскиваемого помощника при использовании draggables + sortables, которые размещаются в плавающих, относительно расположенных родительских элементах. Плавающие родительские элементы - это столбцы Bootstrap, в которых несколько сортируемых списков размещаются в одном столбце, а список перетаскиваемых объектов - в другом.

пример

Вот пример рабочего примера

$('.sortable').sortable({
  connectWith: '.sortable',
  revert: 600,
  forcePlaceholderSize: true,
  placeholder: 'ui-sortable-placeholder',
  tolerance: 'pointer'
}).disableSelection();

$('.draggable').draggable({
  connectToSortable: '.sortable',
  helper: 'clone',
  revert: true
}).disableSelection();

.sortable-container {
  display: inline-block;
  width: 100px;
  vertical-align: top;
}
.sortable {
  cursor: move;
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: top;
  border: 1px solid #000;
}
.ui-sortable-placeholder {
  background: #ff0000;
}
#draggables {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.draggable {
  margin: 4px;
  cursor: move;
  color: #fff;
  background: #5dd1ff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<div class='container-fluid'>
  <div class="row">
    <div class="col-xs-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-3">
      <p>foo</p>
      <p>bar</p>
    </div>
    <div class="col-xs-6">
      <p>foo</p>
      <p>bar</p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-6'>
      <div id='sortables'>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
        <div class='sortable-container'>
          <ul class='sortable'>
            <li>sortable 1</li>
            <li>sortable 2</li>
            <li>sortable 3</li>
            <li>sortable 4</li>
            <li>sortable 5</li>
            <li>sortable 6</li>
          </ul>
        </div>
      </div>
    </div>

    <div class='col-xs-6'>
      <ul id='draggables'>
        <li class='draggable'>draggable 1</li>
        <li class='draggable'>draggable 2</li>
        <li class='draggable'>draggable 3</li>
      </ul>
    </div>
  </div>
</div>

Обновление 16 ноября 2015 Я изменил пример кода, чтобы лучше отразить мой фактический контекст использования, где есть дополнительные строки выше той, которая содержит draggables / sortables.

a скринкасти неподвижное изображение, показывающее, что происходит

Дальнейшее объяснение

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

Интересно, что этого не происходит, когда перетаскиваемые объекты размещаются в том же родительском элементе, что и сортируемые элементы, по крайней мере он не будет смещаться по горизонтали, но вертикально при перемещении перетаскиваемого объекта вверх / вниз или влево / вправо в / из списка сортировки. ,

Горизонтальный сдвиг каким-то образом связан с плавающими / относительно позиционированными родительскими элементами, отключение плавающего или относительное позиционирование исправляет его. Однако я бы хотел оставить все как есть и вместо этого найти другое исправление / обходной путь. Сдвиг по вертикали также происходит, когда плавающее / относительное позиционирование не задействовано, поэтому я думаю, что есть немного больше этой проблемы.

Обновление 15 ноября 2015 - изменения в jQuery UI

Похоже, что jQuery UI 1.11.4 немного изменил поведение, теперь он не будет сразу сдвигаться по горизонтали в тот момент, когда вы покидаете ограничивающую рамку сортируемой области, но сначала вы должны перемещаться между двумя или более сортируемыми элементами. Помимо этого, поведение глючит, кажется, неизменным.

Обновление 16 ноября 2015 - appendTo вариант

Изначально я пытался использоватьappendTo обходной путь, так как таким образом помощник будет храниться вне списков, и хотя это верно для моего исходного примера кода, он не будет работать с обновленным примером кода, где дальнейшие строки размещаются над теми, которые содержат draggables / sortables, они заставляют помощника смещаться вертикально.

Вопрос

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

А как насчет вертикального смещения, видя, что это происходит вдемонстрация пользовательского интерфейса jQuery тоже заставляет меня думать, что это ошибка, которая не связана со стилем родительских элементов?

Обновление 15 ноября 2015 - обнаружена проблема вертикального смещения

Вертикальное смещение, похоже, связано с полем, применяемым к перетаскиваемым элементам, но без этого оно работает нормально.

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

http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806