拖放 2 个放置目标

Question

我正在寻找一个拖放示例，其中拖动项目有两个不同的区域，必须与两个可放置区域相匹配。

例子：

我希望蓝色拖动项目恢复，除非将其放置在其每个红色子项着陆的位置一个绿色区域。

理想情况下，我想使用 jquery ui （因为我有使用它的经验），但任何 javascript 库都可以，提前致谢。

Answer 1

您可以通过使用 draggable/droppable 选项的组合来实现此目的。给定这样的 HTML：（

<div id="blue" class="valid">
    <div id="red-one" class="red"></div>
    <div id="red-two" class="red"></div>
</div>

<div id="green-container">
    <div id="green-one" class="green">
    </div>
    <div id="green-two" class="green">
    </div>
</div>

省略 CSS，我确实添加了一些规则，请参见下面的小提琴）。

你可以这样编写 JavaScript：

function isInside(one, other) {
    return one.offset().left >= other.offset().left &&
        one.offset().top >= other.offset().top &&
        one.offset().top + one.height() <= other.offset().top + other.height() &&
        one.offset().left + one.width() <= other.offset().left + other.width();
}

$("#blue").draggable({
    drag: function(event, ui) {
        var $this = $(this);
        var $reds = $this.children(".red");
        var $greens = $("#green-container").children(".green");
        var firstRed = $reds.first();
        var firstGreen = $greens.first();
        var secondRed = $reds.last();
        var secondGreen = $greens.last();

        if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) {
            $this.addClass('valid');
        }
        else {
            $this.removeClass('valid');
        }       
    },
    revert: 'invalid'
});


$("#green-container").droppable({ accept: ".valid" });

在这里查看：http://jsfiddle.net/andrewwhitaker/g6FKz/

注释：

• 出于某种原因，我必须首先将“有效”类应用于“蓝色”div，否则目标可放置元素将不会接受拖动的元素，即使它是有效的（将感谢对此的一些意见）。不确定这是怎么回事，可能是 jQueryUI 中的一个错误。不过没什么大不了的。
• 目标 droppable 并不完全是两个绿色元素，它是一个包含这些元素的白色 div 。从例子中应该可以清楚地看出这一点。
• 每次移动可拖动 div 时，都会调用“drag”事件，该事件确定红色框是否位于绿色框内，并为可拖动 div 分配一个 valid 类。代码>div。可放置对象仅接受有效可拖动对象。

希望有帮助！