我有一个Jquery UI可排序,其中可排序框使用margin: 0 auto
在其容器中居中。
我在sortable中使用axis: 'y'
设置,以便框只能垂直移动。
排序时,拖动的框移动到容器的左侧
使用带有axis: y
的draggable不会导致此问题,它似乎与可排序的小部件有关。
我复制了jsfiddle中的错误。有什么想法吗?
答案 0 :(得分:3)
问题在于,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>