Question

我有2个容器。

它们都是可拖动的，可以拖放的，以确保我可以将标签从一个移动到另一个。

在drop函数中，我检查容器的id。根据id的名称，我决定是否应该向用户添加标签，还是应该从用户中删除它。

我们说，existsTagsContiner有一个容器div。这包含用户的标签。

另一个容器是userTagsContainer，其中包含不属于用户的所有标记。

这两个容器都有一个类：.draggableTagContainer

一切正常，当我将标签从一个移动到另一个时，ajax进行操作，并为用户显示一条消息。

例如，如果用户将代码从existsTagsContiner移动到userTagsContainer，那么我应该将标记添加到用户。

但是，我的问题就出现了：如果我将标签从existsTagsContiner移动到existsTagsContiner（因此没有发生任何移动，只需拖放同一个容器），该消息也会出现！

绝对不应该发生。所以，我想要实现的目标是获得＆＃34;来源＆＃34;容器的id。如果＆＃34;来源＆＃34;与drop函数中的$(this).attr('id')相同，我什么都不做。

我已添加评论，我需要获取原始容器名称。

这是我的代码。

    $('#existsTagsContiner, #userTagsContainer').droppable({
        tolerance: "intersect",
        accept: ".draggableTagContainer",
        drop: function (event, ui) {
            var tagId = $(ui.helper.context).data('id');
            $('#tagId').val(tagId);

            //At here I need something like $(ui.helper.___SOURCE___)

            if ($(this).attr('id') === 'existsTagsContiner') {
                $.removeTagFromUser();
            } else {
                $.saveTagToUser();
            }
            $('#tagId').val('0');
            if (!$(this).find('ul').length) {
                $(this).html('<ul>');
            }
            $(this).find('ul').append($(ui.draggable));
        }
    });


    $('.draggableTagContainer').draggable({
        start: function (event, ui) {
            $(ui.helper).addClass("draggableTagContainer");
        },
        appendTo: 'parent',
        cursor: "move",
        helper: 'clone',
        revert: 'invalid',
        cancel: ".draggableTagDelete",
    });

更新

如果我在开始拖动时向data-from添加li，那么这可能是一种解决方法。 但也许有一个内置功能，这是我想知道的。

这是解决方法。在draggable add的start函数中：

 $(ui.helper).data('from', $(this).closest('.tagContainer').attr('id'));

在droppable drop函数中添加：

if ($(this).attr('id') === ui.helper.data('from')) {
    return false;
}

获取可拖动的父容器

0 个答案: