使用邊距居中排序的元素：0在排序時自動捕捉到左側

Question

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

我在排序中使用axis: 'y'設置，以便盒子只能垂直移動。

排序時，拖動箱子移動到容器

使用拖動與axis: y不會導致此問題的左側，這似乎可排序小部件有關。

我複製了這個錯誤jsfiddle。有任何想法嗎？

Answer 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>