防止在JqueryUI排序中丢弃列表项
我有两个列表#sortable1和#sortable 2，它们是连接的可排序的，如此example所示。
您可以将列表项从sortable1拖放到sortable 2。但是，如果sortable 1中的项目包含类"number"，我想防止 drop on Sortable2，从而使拖拽的项目放回到sortable 1中。
我在sortable2上使用了以下代码：
receive: function (event, ui) {
if ($(ui.item).hasClass("number")) {
$(ui.item).remove();
}但它会从两个表中完全删除列表项。任何帮助都将不胜感激。
回答 7
Stack Overflow用户
发布于 2012-08-02 20:44:41
您可以组合使用stop和sortable('cancel')方法来验证要移动的项。在this example中，当项目被删除时，我通过以下方法检查项目是否有效：
检查项是否具有类number
- and检查是否在
list2
中删除了
- 项
这是我想要的稍微硬编码的，所以你也可以做的是根据this检查被拖放项的父项，检查列表是否不同。这意味着您可能会在list1和list2中拥有一项number，但它们不能互换。
$(function() {
$('ul').sortable({
connectWith: 'ul',
stop: function(ev, ui) {
if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel');
}
}
});
});Stack Overflow用户
发布于 2014-07-13 21:27:30
对于将来阅读这篇文章的任何人来说，正如briansol在接受的答案的评论中提到的那样，它会抛出错误
Uncaught TypeError: Cannot read property 'removeChild' of null文档特别写道
取消对当前可排序的更改，并将其恢复到开始当前排序之前的状态。在停止和接收回调函数中非常有用。
在其他事件期间取消排序是不可靠的，因此最好使用receive事件(如Mj Azani的answer所示)或使用stop事件(如下所示)：
$('#list1').sortable({
connectWith: 'ul',
stop: function(ev, ui) {
if(ui.item.hasClass("number"))
$(this).sortable("cancel");
}
});
$('#list2').sortable({
connectWith: 'ul',
}); Stack Overflow用户
发布于 2016-07-12 08:42:13
经过几次实验，我发现到目前为止最简单的方法是使用remove事件，该事件基本上只在您尝试将项目拖放到新的可排序表(以前使用connectWith将其作为目标)时才会触发。
只需将此代码添加到可排序调用中：
remove:function(e,ui) {
if(ui.item.hasClass('your_restricted_classname')) return false;
},https://stackoverflow.com/questions/11777438
复制相似问题