jquery 可排序保持在容器边界内

Question

请看下面的 fiddle :

http://jsfiddle.net/ujdsu/

HTML，简单的无序列表:

<ul class="sortable">
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ul>

j查询:

$(function() {      
   $( ".sortable" ).sortable({
       axis: 'y' 
   }).disableSelection();
});​

CSS:

ul{
    margin:20px 0 0 20px;
    border:1px solid #000;
    width:70%;
    overflow:hidden;
    position:relative;
}
li{
    background:#ccc;
    border-top:1px solid #000;
    padding:10px 5px;
    cursor:move;
}   
li:first-child{
    border-top:0;
}

默认情况下，您可以将元素拖到其容器之外。我已经通过向容器添加“溢出:隐藏”来解决这个问题，但是，您仍然可以将元素拖到容器外，只是看不到外面的部分。请看下面的屏幕截图:

我想要实现的是，一旦元素碰到容器的顶部或底部边缘，用户就无法再进一步移动该元素，因此您不会看到上面屏幕截图中显示的结果。理想情况下，“第三项”会碰到顶部边缘并且不会再移动。

谢谢

Answer 1

您需要通过 containment选项:

$(function() {      
    $( ".sortable" ).sortable({
       axis: 'y',
       containment: "parent" 
    }).disableSelection();
});​

这是一个工作示例，代码为:http://jsfiddle.net/VzpBq/

containment 选项的定义 Sortable jQueryUI API :

Defines a bounding box that the sortable items are contrained to while dragging.