我要避免将第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>
我认为我必须使用stop事件并检查项目7是否在红色列表中,如果是,则将项目返回到原始位置。
答案 0 :(得分:2)
您可以通过sortable('stop')使用“取消/停止”功能:
$("span").sortable({
remove: function(e, ui) {
if(ui.item.hasClass("id_7")) {
alert('id 7');
e.preventDefault();
}
},
connectWith: ".con"
});