以空白为中心的可排序元素：排序时自动向左对齐0

问题描述

|| 我有一个可排序的Jquery UI，其中可排序框使用ѭ0居中放置在其容器中。 我在可排序项中使用

axis: \'y\'

设置，因此框只能垂直移动。 排序时，拖动的框移动到容器的左侧 与

axis: y

一起使用draggable不会导致此问题，它似乎与可排序的小部件有关。 我在此jsfiddle中复制了该错误。有任何想法吗？     

解决方法

        问题是，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>