javascript - 可排序的容器/边界

Question

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

jquery sortable keep within container Boundary

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

Correct Containment Fiddle

My Wrong Containment Fiddle

嘿，骗子，这是没有 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”。