拖放2滴目标

时间:2011-01-07 17:00:40

标签: javascript jquery jquery-ui drag-and-drop jquery-ui-draggable

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

实施例: alt text

我希望蓝色拖动项目能够恢复,除非它被放置在每个红色儿童落在绿色区域的位置。

理想情况下我想使用jquery ui(因为我有经验),但任何javascript库都没问题,提前谢谢。

1 个答案:

答案 0 :(得分:2)

您可以结合使用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/

备注:

  • 由于某种原因,我不得不首先将'valid'类应用于'blue'div,否则目标droppable将不接受拖动的元素,即使它是有效的(会对此有所了解)。不确定是什么,可能是jQueryUI中的一个错误。虽然不是很大。
  • 目标可放置不完全是两个绿色元素,它是包含这些元素的白色div。这应该从示例中清楚。
  • 每次移动可拖动的div时,都会调用“拖动”事件,该事件将确定红色框是否位于绿色框内,并为可拖动的valid分配div类}。 droppable对象只接受valid draggables。

希望有所帮助!