拖放2滴目标

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

例：

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

理想情况下，我想使用jquery ui（因为我有它的经验），但任何JavaScript库都没关系，提前谢谢。

Answer 1

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

（省略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/

笔记：

• 出于某种原因，我不得不首先将'有效'类应用于'blue'div，否则目标droppable将不接受被拖动的元素，即使它是有效的（会欣赏一些输入）。 不确定是什么，可能是jQueryUI中的一个错误。 虽然不是很大的交易。
• 目标可放置不完全是两个绿色元素，它是包含这些元素的白色div 。 从示例中可以清楚地看出这一点。
• 每次移动可拖动的div ，都会调用“拖动”事件，该事件确定红色框是否在绿色框内，并为可拖动的div指定一个valid类。 droppable对象只接受valid draggable。

希望有所帮助！