防止删除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 。但是，如果可排序1 中的项目包含类number，我希望阻止 Sortable2 的下拉，从而使拖动的项目回到可排序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.

推荐答案

您可以使用 beforeStop 和 sortable（'cancel'）验证要移动的项目的方法。在这个例子中，一旦项目被删除，我通过以下方式检查该项目是否有效：

You can use a combination of the beforeStop 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. 检查项目是否有类号码


2. 和检查列表项是否在 list2中删除

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

稍微更加硬编码，我想要的，或者你可以做的是检查删除的项目的父项与这个，以检查列表是不同的。这意味着您可能在 list1 和 list2 号码 c $ c>，但它们不可互换。

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',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​

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