防止在JqueryUI sortable中删除列表项

moiiocjp  于 2023-10-17  发布在  jQuery
关注(0)|答案(8)|浏览(135)

我有两个列表#sortable1#sortable 2,它们是连接的可排序列表,如本例所示。
您可以将列表项从sortable1拖放到sortable 2。但是,如果sortable 1中的项目包含类“number”,我想防止Sortable2上的拖放,从而使拖动的项目拖回sortable 1
我在sortable2上使用了以下代码:

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

但是它从两个表中一起删除该列表项。任何帮助将不胜感激。

k4ymrczo

k4ymrczo1#

对于将来阅读这篇文章的任何人来说,正如briansol在接受答案的评论中提到的那样,它会抛出错误

Uncaught TypeError: Cannot read property 'removeChild' of null

文件特别指出,
cancel()
取消当前排序表中的更改,并将其恢复到当前排序开始之前的状态。在stopreceive回调函数中很有用。
在其他事件期间取消排序是不可靠的,因此最好使用receive事件,如Mj Azanianswer所示,或者使用stop事件,如下所示:

$('#list1').sortable({
  connectWith: 'ul',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

$('#list2').sortable({
   connectWith: 'ul',
});

Demo

ua4mk5z4

ua4mk5z42#

可以组合使用stopsortable('cancel')方法来验证要移动的项。在this example中,当一个项目被删除时,我通过以下方式检查该项目是否有效:
1.检查项目是否具有类number
1.* 和 * 检查list2中的列表项是否被删除
这是我想要的稍微硬编码,所以你可以做的是根据this检查被删除项的父项,检查列表是否不同。这意味着您可能在list1list2中拥有一个number项,但它们不可互换。

jsFiddle Example

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        stop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​
shyt4zoc

shyt4zoc3#

尝试this example

$('#list1').sortable({
    connectWith: 'ul'
});    
    
$('#list2').sortable({
    connectWith: 'ul',
    receive: function(ev, ui) {
        if(ui.item.hasClass("number"))
          ui.sender.sortable("cancel");
    }
});
gkn4icbw

gkn4icbw4#

经过几次实验,我发现到目前为止最简单的方法是使用remove事件,它基本上只在您尝试将一个项目放入新的sortable(以前使用connectWith作为目标)时才会触发。
只需将此添加到您的可排序调用:

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
hk8txs48

hk8txs485#

如果你根本不需要能够拖动类为“number”的项目,你也可以将整个拖放功能限制在不具有类“number”的项目上:

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});

你可以在这里试试:http://jsfiddle.net/60gwjsgb/1/

ejk8hzay

ejk8hzay6#

beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

试试这个.

ca1c2owp

ca1c2owp7#

如果a)你只有这两个列表,并且B)你不在乎你的“数字”实际上被拖动然后又被拖回,你可以简单地通过以下方式防止它被拖动:

sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
6bc51xsx

6bc51xsx8#

这是我的两分钱。如果你不希望在一个连接列表中允许排序,你可以在触发start even时将它从示例对象的容器中删除,这样排序就不会发生,如果你需要在之后恢复排序功能,你可以再次重新创建sortable或将删除的元素添加回容器数组。它看起来像这样:

start: function(e, ui){
        if(ui.item.hasClass('uniqToSortableItem')){
            var instance = $(this).sortable( "instance" );
            var newContainers = [];
            instance.containers.forEach((el)=> {
                if(!el.element.hasClass('sortableToDisable')){
                    newContainers.push(el);
                } 
            });
            // in case you need to save initial array just attach it to ui.helper
            ui.helper.initialContainersArray = instance.containers;
            instance.containers = newContainers;
        }
    },
    stop: function(e, ui){
        // returning containers array to previous state if necessary
        if(ui.helper.initialContainersArray){
            $(this).sortable( "instance" ).containers = ui.helper.initialContainersArray;
        }
    }

相关问题