可分类容器/边界

Question

我正在尝试为我的可排序项目创建边界。我看过这个问题/答案：

jquery sortable keep within container Boundary

并试图将我的 JS 以此为基础，但无论出于何种原因，每当我在我的 UL 周围添加一个容器时，我都会失去顶部和底部的容器，并且用户可以将项目拖到容器之外：

嘿骗骗骗骗，这是没有 fiddle 的代码：

工作

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

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

<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.1/jquery-ui.js"></script>
<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( document ).ready( function( $ ) {
   $( ".sort" ).sortable({
    axis:   'y',
    containerment: 'parent'
   }).disableSelection();
  } );

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

<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.1/jquery-ui.js"></script>

<div id="sortWrapper">
    <ul class="sort">
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
        <li>fourth item</li>
        <li>fifth item</li>
    </ul>
</div>

使非工作项目离开容器的两个代码块有什么区别？

Answer 1

你在第二个 javascript 中打错了 'containment'。

可分类容器/边界

Sortable Container / Boundaries

javascript

sorting

jquery

jquery-ui

jquery-ui-sortable