jquery拖放标签多对一

时间:2015-11-17 07:58:40

标签: jquery drag-and-drop

我尝试将多对一拖放标记实现为jsfiddle.net/7683X/126/。实际上我从数据库中获取'.box'的值。

$(document).ready(function () {
        galleryDragAndDrop("#test-container", "#gallery-one", "#gallery-two", "#gallery-three", ".box");

});
    function galleryDragAndDrop(mainContainer, containerOne, containerTwo, containerThree, dragItem) {
    $(dragItem).draggable(
        {              
            containment: mainContainer,
            helper: "clone",
            cursor: "move",
            drag: function (event, ui) {
                $(ui.helper.prevObject).addClass("box_current");
            },                
            stop: function (event, ui) {
                $(ui.helper.prevObject).removeClass("box_current");
            }                
        });

    $(containerTwo).droppable({

        accept: dragItem,
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            acceptBoxIngalleryTwo(ui.draggable);
        }

    });

    $(containerOne).droppable({
        accept:dragItem,
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            acceptBoxIngalleryOne(ui.draggable);

        }

    });

    $(containerThree).droppable({
        accept: dragItem,
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            acceptBoxIngalleryThree(ui.draggable);

        }

    });

    function acceptBoxIngalleryTwo(item) {
        $(item).fadeOut(function () {
            $(containerTwo).append(item);
        });
       $(item).fadeIn();
        $(item).removeClass("box_current");
    }

    function acceptBoxIngalleryOne(item) {
        $(item).fadeOut(function () {
            $(containerOne).append(item);
        });

        $(item).fadeIn();
        $(item).removeClass("box_current");
    }

    function acceptBoxIngalleryThree(item) {
        $(item).fadeOut(function () {
            $(containerThree).append(item);
        });

        $(item).fadeIn();
        $(item).removeClass("box_current");
    }
}

我需要的是我有3个div作为gallery-one(source1),gallery-two(target),gallery-three(source2)。我将元素从source1和source2拖到目标。当我将这些元素从目标div拖回到源div时,它必须检查拖动的元素以前是从source1还是source2,这样source1不应该接受来自source2的标记等等。请帮忙!

提前致谢。

0 个答案:

没有答案