jQuery 防止在 JqueryUI 可排序中删除列表项

Prevent drop of list item in JqueryUI sortable

提问by user1038814

I have two lists #sortable1and #sortable 2which are connected sortables, as shown in this example.

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

You can drag and drop list items from sortable1to sortable 2. However, if an item in sortable 1contains the class "number", I want to preventthe drop on Sortable2and thus make the dragged item drop back into sortable 1.

您可以从sortable1到拖放列表项sortable 2。但是，如果sortable 1中的项目包含类“number”，我想防止在Sortable2 上放置，从而使拖动的项目放回sortable 1。

I have used the following on sortable2:

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

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

but it deletes the list item from both tables altogether. Any help will be appreciated.

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

采纳答案by Richard

You can use a combination of the beforeStopand sortable('cancel')methods to validate the item being moved. In this example, upon an item being dropped, I check if the item is valid by:

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

1. Checking if the item has the class number
2. andchecking if the list item was dropped in list2

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

This is slightly more hard-coded that I'd like, so alternatively what you could do is check the parent of the dropped item against this, to check if the lists are different. This means that you could potentially have an item of numberin list1and list2, but they're not interchangeable.

这是我想要的稍微更硬编码的代码，因此您可以做的是检查已删除项目的父项this，以检查列表是否不同。这意味着您可能有一个numberinlist1和 项list2，但它们不可互换。

jsFiddle Example

jsFiddle 示例

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

回答by T J

For anyone reading this in future, as mentioned by briansolin comments for the accepted answer, it throws error

对于将来阅读此内容的任何人，如briansol在已接受答案的评论中所述，它会引发错误

Uncaught TypeError: Cannot read property 'removeChild' of null

The the documentation particularly says

文档特别说

cancel()

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started. Useful in the stopand receivecallback functions.

cancel()

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

Canceling the sort during other events is unreliable, So it's better use the receiveevent as shown in Mj Azani's answeror use the stopevent as follows:

在其他赛事取消的排序是不可靠的，所以最好用receive事件如图MJ Azani的答案，或使用stop如下事件：

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

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

Demo

演示

回答by Mj Azani

Try this example

试试这个例子

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

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

回答by Ian Young

After a few experiments, I've found that by far the easiest method is to use the remove event, that essentially only fires when you try to drop an item into a new sortable (that was previously made available as a target using connectWith).

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

Simply add this to your sortable call:

只需将此添加到您的可排序调用中：

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

回答by TanvirChowdhury

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

try this.

尝试这个。

回答by Narges Ahani

If a) you only have just these 2 lists, and b) you don't care that your "number" actually be dragged and then drop back, you can simply prevent it from getting dragged by this:

如果 a) 你只有这 2 个列表，并且 b) 你不关心你的“号码”实际上被拖拽然后放回去，你可以简单地防止它被拖拽：

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

回答by Kirill

Here is my 2 cents. If you don't wish to allow sorting in one of the connected list you can remove it from the containers in the instance object when start even is triggered, so the sorting won't happen at all, and if you need to restore the sorting functionality afterwards, you can recreate the sortable once again or add back removed elements in container array. It would look like this:

这是我的 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;
        }
    }

回答by ollie

If you don't need to be able to drag the items with class "number" at all, you can also restrict the whole drag-and-drop functionality to items that don't have the class "number":

如果您根本不需要能够拖动类别为“number”的项目，您还可以将整个拖放功能限制为不具有类别“number”的项目：

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

You can try it out here: http://jsfiddle.net/60gwjsgb/1/

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