使用边距居中的可排序元素：0 排序时自动向左对齐答案

【问题标题】：Sortable elements centered using margin: 0 auto snaps to left while sorting使用边距居中的可排序元素：0 排序时自动向左对齐
【发布时间】：2011-06-14 08:12:51
【问题描述】：

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

我在 sortable 中使用axis: 'y' 设置，这样盒子只能垂直移动。

排序时，拖动的框移动到容器的左边

与axis: y一起使用draggable不会出现这个问题，好像和sortable widget有关。

我复制了这个jsfiddle 中的错误。有什么想法吗？

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-sortable

【解决方案1】：

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

解决此问题的一个选项是使用自定义定位助手使用helper option 进行拖动。您可以使用 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>

【讨论】：