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

Question

请看下面的小提琴：

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>

jQuery：

$(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;
}

​</p>

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

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

谢谢

Answer 1

您需要传递遏制选项：

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

这是一个带有代码的工作示例：http: //jsfiddle.net/VzpBq/

Sortable jQueryUI APIcontainment中的选项定义：

定义可排序项目在拖动时被约束的边界框。