我正在尝试为我的可排序项目创建边界。我看过这个问题/答案:
jquery sortable keep within container Boundary
并尝试将我的 JS 以此为基础,但无论出于何种原因,每当我在 UL 周围添加容器时,我都会失去顶部和底部的遏制,并且用户可以将项目拖到 cotnainer 之外:
嘿,骗子,这是没有 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>
使非工作项离开容器的两个代码块有什么区别?
最佳答案
您在第二个 JavaScript 中输入了“containment”。
关于javascript - 可排序的容器/边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28224149/