拖放与2放下目标 [英] Drag and drop with 2 drop target

问题描述

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

示例：

我想要蓝色拖动项目恢复，除非它被放在一个位置，其中每个红色的孩子都落在绿色的地方。

理想情况下，我想使用jquery ui

解决方案

您可以使用组合来实现这一点 draggable / droppable options。给出这样的HTML：

 < div id =blueclass =valid> 
< div id =red-oneclass =red>< / div> 
< div id =red-twoclass =red>< / div> 
< / div> 
 
< div id =green-container> 
< div id =green-oneclass =green> 
< / div> 
< div id =green-twoclass =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 $ green = $（＃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中的一个错误。


• 目标droppable不是两个绿色元素，它是一个包含这些元素的白色 div 。这个例子应该是清楚的。


• 每次移动可拖动的 div 时，调用drag事件，它决定如果红色框位于绿色框中，并将有效的类分配给可拖动的 div 。 droppable对象只接受有效 draggables。

希望有帮助！ p>

I am looking for an example of drag and drop where the drag item has two distinct areas that have to match up with two droppable areas.

Example:

I would like the blue drag item to revert unless it is dropped in a position where each of its red children land on a green area.

Ideally I would like to use jquery ui (as I have experience with it), but any javascript library would be fine, thanks in advance.

解决方案

You can accomplish this by using a combination of draggable/droppable options. Given HTML like this:

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

(omitting CSS, I did add some rules, see in the fiddle below).

You can write JavaScript like this:

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" });

Check it out here: http://jsfiddle.net/andrewwhitaker/g6FKz/

Notes:

• For some reason I had to apply the 'valid' class initially to the 'blue' div, or else the target droppable would not accept the dragged element, even if it was valid (would appreciate some input on this). Not sure what's up with that, might be a bug in jQueryUI. Not a huge deal though.
• The target droppable isn't exactly the two green elements, it's a white div that contains those elements. This should be clear from the example.
• Every time you move the draggable div, the "drag" event is called, which determines if the red boxes are inside the green ones and assigns a valid class to the draggable div. The droppable object only accepts valid draggables.

Hope that helps!

这篇关于拖放与2放下目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！