21

我有两个列表 #sortable1#sortable 2它们是连接的可排序,如本示例所示。

您可以将列表项从 拖放sortable1sortable 2。但是,如果可排序 1中的项目包含“数字”类,我想防止Sortable2上放置,从而使拖动的项目回到可排序 1中。

我在 sortable2 上使用了以下内容:

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

但它会从两个表中完全删除列表项。任何帮助将不胜感激。

4

8 回答 8

30

对于将来阅读此内容的任何人,正如briansol在对已接受答案的评论中提到的那样,它会引发错误

Uncaught TypeError: Cannot read property 'removeChild' of null

该文件特别说

cancel()

取消当前排序的更改并将其恢复到当前排序开始之前的状态。在停止接收回调函数中很有用。

在其他事件期间取消排序是不可靠的,因此最好使用Mj Azani答案receive中显示的事件或使用如下事件:stop

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

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

演示

于 2014-07-13T13:27:30.160 回答
19

您可以使用stopsortable('cancel')方法的组合来验证正在移动的项目。在这个例子中,当一个项目被丢弃时,我通过以下方式检查该项目是否有效:

  1. 检查项目是否具有类number
  2. 检查列表项是否被放入list2

这是我想要的稍微硬编码的,所以你可以做的是检查被删除项目的父项this,以检查列表是否不同。这意味着您可能拥有numberinlist1和的项目list2,但它们不可互换。

jsFiddle 示例

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        stop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​
于 2012-08-02T12:44:40.500 回答
14

试试这个例子

$('#list1').sortable({
    连接:'ul'
});    

$('#list2').sortable({
    连接:'ul',
    接收:函数(ev,ui){
        如果(ui.item.hasClass(“数字”))
          ui.sender.sortable("取消");
    }
});    
于 2013-10-23T17:47:41.200 回答
1

经过几次实验,我发现迄今为止最简单的方法是使用 remove 事件,它基本上只在您尝试将项目放入新的可排序对象时触发(之前使用 connectWith 作为目标)。

只需将其添加到您的可排序调用中:

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
于 2016-07-12T00:42:13.120 回答
0

如果您根本不需要拖动具有“编号”类的项目,您还可以将整个拖放功能限制为没有“编号”类的项目:

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

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

于 2015-08-04T19:41:34.610 回答
0
beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

试试这个。

于 2018-05-09T09:34:25.350 回答
0

如果a)您只有这两个列表,并且b)您不在乎您的“数字”实际上被拖动然后回落,您可以简单地防止它被拖动:

 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
于 2018-07-02T19:02:26.147 回答
0

这是我的 2 美分。如果您不希望在其中一个连接列表中进行排序,则可以在触发 start even 时将其从实例对象中的容器中删除,因此根本不会发生排序,如果您需要恢复排序功能之后,您可以再次重新创建可排序或在容器数组中添加已删除的元素。它看起来像这样:

    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;
        }
    }
于 2019-05-31T09:05:44.983 回答