我有两个列表#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();
}
但它会从两个表中完全删除列表项。任何帮助都将不胜感激。
发布于 2012-08-02 20:44:41
您可以组合使用stop
和sortable('cancel')
方法来验证要移动的项。在this example中,当项目被删除时,我通过以下方法检查项目是否有效:
检查项是否具有类number
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');
}
}
});
});
发布于 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',
});
发布于 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
复制相似问题