防止在可排序的 JqueryUI 中删除列表项 [英] Prevent drop of list item in JqueryUI sortable

问题描述

我有两个列表 #sortable1 和 #sortable 2 是连接的可排序对象，如此 示例.

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

您可以将列表项从 sortable1 拖放到 sortable 2.但是，如果 sortable 1 中的项目包含数字"类，我想 防止 Sortable2 上的下降，从而使拖动的项目回到sortable 1.

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

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

I have used the following on 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.

推荐答案

您可以结合使用 stop 和 sortable('cancel') 方法来验证正在移动的项目.在 this example 中，当物品被丢弃时，我通过以下方式检查该物品是否有效:

You can use a combination of the stop and 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:

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

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

这是我想要的稍微硬编码的，所以你可以做的是对照 this 检查被删除项目的父项，以检查列表是否不同.这意味着您可能在 list1 和 list2 中有一个 number 项，但它们不可互换.

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 number in list1 and list2, but they're not interchangeable.

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

这篇关于防止在可排序的 JqueryUI 中删除列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！