用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/

注：

• 出于某种原因，我不得不申请 '有效' 类最初到'blue'div，否则目标droppable不会接受被拖动的元素，即使它是有效的（会欣赏一些输入这个）。不知道这是怎么回事，可能是jQueryUI中的一个错误。虽然不是很大。
• 目标droppable不完全是两个绿色元素，它是一个白色div包含这些元素。这个例子应该很清楚。
• 每次移动可拖动的div时，都会调用“拖动”事件，该事件确定红色框是否在绿色框内，并将valid类指定给可拖动的div。可拖放对象只接受valid可拖动。

希望帮助！