使用margin定居的可排序元素:0排序时自动捕捉到左侧

Question

我有一个Jquery UI可排序,其中可排序框在其容器中居中使用margin: 0 auto.

我使用axis: 'y'sortable中的设置,这样盒子只能垂直移动.

排序时,拖动的框移动到容器的左侧

使用draggable with axis: y不会导致此问题,它似乎与可排序小部件有关.

我在这个jsfiddle中复制了这个bug.有任何想法吗？

Answer 1

问题是，jQuery UIposition:absolute在拖动时应用 - 导致元素定位在top:0最近left:0定位元素的 、 或窗口处。

解决此问题的一个选项是使用自定义定位助手来使用选项进行helper拖动。您可以利用 jquery UIposition()实用程序方法轻松地相对于原始元素定位助手，如下所示：

$('#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>