jquery 可按项目限制排序
jquery sortable with item restriction
我想避免第7项被拖入红名单。
$("span").sortable({
connectWith: ".con"
}).disableSelection();
#red {
margin-top: 10px;
border: 1px solid red;
display: block;
}
#green {
margin-top: 10px;
border: 1px solid green;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.9/jquery-ui.min.js"></script>
<form id="form">
<span id="red" class="con">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</span>
<span id="green" class="con">
<div>Item 6</div>
<div>Item 7</div>
</span>
</form>
我想我必须使用停止事件并检查项目 7 是否在红色列表中,如果是 return 项目到原始位置。
您可以使用 "cancel/stop" 功能使用 sortable('stop') :
$("span").sortable({
remove: function(e, ui) {
if(ui.item.hasClass("id_7")) {
alert('id 7');
e.preventDefault();
}
},
connectWith: ".con"
});
我想避免第7项被拖入红名单。
$("span").sortable({
connectWith: ".con"
}).disableSelection();
#red {
margin-top: 10px;
border: 1px solid red;
display: block;
}
#green {
margin-top: 10px;
border: 1px solid green;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.9/jquery-ui.min.js"></script>
<form id="form">
<span id="red" class="con">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</span>
<span id="green" class="con">
<div>Item 6</div>
<div>Item 7</div>
</span>
</form>
我想我必须使用停止事件并检查项目 7 是否在红色列表中,如果是 return 项目到原始位置。
您可以使用 "cancel/stop" 功能使用 sortable('stop') :
$("span").sortable({
remove: function(e, ui) {
if(ui.item.hasClass("id_7")) {
alert('id 7');
e.preventDefault();
}
},
connectWith: ".con"
});