jquery sortable保持在容器边界内

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

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

我想要达到的目的是让用户一旦碰到容器的顶部或底部边缘就无法再移动项目，因此您将看不到上面屏幕截图中显示的结果。理想情况下，“第三项”将达到最高优势，不再进一步移动。

由于

Answer 1

您需要传递containment选项：

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

以下是代码为http://jsfiddle.net/VzpBq/

的代码示例

Sortable jQueryUI API中containment选项的定义：

  

定义可排序项目与其绑定的边界框   拖动。