Drag & Drop mit 2 Drop-Ziel

Question

Ich suche nach einem Beispiel für Drag & Drop, wo das Drag-Element zwei verschiedene Bereiche hat, die mit zwei ablegen Bereichen übereinstimmen müssen.

Beispiel:

Ich würde das blaue Drag Artikel gerne zurückkommen, wenn es in der Lage, fallen gelassen wird, wo jeder seiner roten Kinder auf einem grünen Bereich landen.

Idealerweise würde ich gerne jquery ui verwenden (wie ich Erfahrung damit habe), aber jede Javascript-Bibliothek wäre in Ordnung, danke im Voraus.

Answer 1

Sie können dies erreichen, indem Sie eine Kombination von draggable/droppable Optionen verwenden. Angesichts HTML wie folgt aus:

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

(Weglassen CSS, habe ich ein paar Regeln hinzufügen, finden Sie in der Geige unten).

Sie JavaScript schreiben wie folgt aus:

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

bestellen hier aus: http://jsfiddle.net/andrewwhitaker/g6FKz/

Hinweise:

• Aus irgendeinem Grund habe ich die 'gültig' Klasse anwenden musste anfänglich auf das 'blaue' div, oder das Ziel droppable würde das gezogene Element nicht akzeptieren, selbst wenn es gültig wäre (würde einige Eingaben an schätzen Dies). Nicht sicher, was los ist, könnte ein Fehler in jQueryUI sein. Keine große Sache.
• Das Ziel droppable ist nicht genau die zwei grünen Elemente, es ist ein weißer div, der diese Elemente enthält. Dies sollte aus dem Beispiel klar sein.
• Jedes Mal, wenn Sie die ziehbare div verschieben, wird das Ereignis "drag" aufgerufen, das festlegt, ob die roten Kästchen innerhalb der grünen Kästchen liegen und eine valid Klasse dem ziehbaren div zuweist. Das Drop-fähige Objekt akzeptiert nur valid Draggables.

Hoffe, dass hilft!