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

​

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

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

谢谢

Answer 1

您需要传递containment 选项：

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

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

Sortable jQueryUI API 中containment 选项的定义：

定义一个边界框，可排序的项目被限制在其中 拖动。