Question

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

jquery sortable keep within container Boundary

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

Hey diddle diddle，这里的代码没有小提琴：

工作

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

你输入错误＆＃39;遏制＆＃39;在第二个的javascript中。

可分类的容器/边界

1 个答案: