Сортируемые элементы по центру с помощью поля: 0 автоматически привязывается влево при сортировке - PullRequest
Новая
       1

Сортируемые элементы по центру с помощью поля: 0 автоматически привязывается влево при сортировке

6 голосов
/ 14 июня 2011

У меня есть сортируемый пользовательский интерфейс Jquery, в котором сортируемые ящики располагаются по центру в их контейнере, используя margin: 0 auto.

Я использую настройку axis: 'y' в сортируемой ячейке, чтобы ящики могли двигаться только вертикально.

При сортировке перетаскиваемое поле перемещается влево от контейнера.

Использование перетаскивания с axis: y не вызывает этой проблемы, похоже, оно связано с сортируемым виджетом.

Я повторил ошибку в этом jsfiddle .Есть идеи?

1 Ответ

3 голосов
/ 08 ноября 2014

Проблема заключается в том, что jQuery UI применяет position:absolute при перетаскивании - заставляя элемент располагаться в top:0, left:0 ближайшего расположенного элемента или в окне.

Одним из вариантов решения этой проблемы является использование настраиваемого помощника для перетаскивания с использованием опции helper . Вы можете использовать вспомогательный метод jquery UI position() для простого позиционирования помощника относительно исходного элемента следующим образом: 

$('#container').sortable({
  axis: 'y',
  helper: function(event, elm) {
    return $(elm).clone().position({
      my: "left",
      at: "left",
      of: elm
    });
  }
});
* { /*for stack snippet demo*/
  margin: 0;
  padding: 0;
}
#container {
  width: 200px;
  text-align: center;
  height: 300px;
  border: 1px solid green;
  position: relative;
}
.draggable {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px auto;
  cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="container">
  <div class="draggable"></div>
  <div class="draggable"></div>
</div>
...