javascript - images - Arrastra y suelta con 2 drop target

javascript on drag out

Question

Estoy buscando un ejemplo de arrastrar y soltar donde el elemento de arrastre tiene dos áreas distintas que tienen que coincidir con dos áreas que se pueden quitar.

Ejemplo:

Me gustaría que el elemento de arrastre azul se revierte a menos que se deje caer en una posición donde cada uno de sus hijos rojos aterrice en un área verde.

Idealmente, me gustaría usar jquery ui (ya que tengo experiencia con él), pero cualquier biblioteca javascript estaría bien, gracias de antemano.

Answer 1

Puede lograr esto usando una combinación de opciones draggable / droppable . Dado HTML como este:

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

(omitiendo CSS, agregue algunas reglas, ver en el violín a continuación).

Puedes escribir JavaScript así:

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

Compruébelo aquí: http://jsfiddle.net/andrewwhitaker/g6FKz/

Notas:

• Por alguna razón, tuve que aplicar la clase ''válida'' inicialmente al div ''azul'', de lo contrario, el droppable objetivo no aceptaría el elemento arrastrado, incluso si fuera válido (agradecería alguna información sobre esto). No estoy seguro de qué pasa con eso, podría ser un error en jQueryUI. No es un gran problema sin embargo.
• El objetivo droppable no es exactamente los dos elementos verdes, es un div blanco que contiene esos elementos. Esto debe quedar claro en el ejemplo.
• Cada vez que mueve el div arrastrable, se invoca el evento "arrastrar", que determina si los cuadros rojos están dentro de los verdes y asigna una clase valid al div arrastrable. El objeto droppable solo acepta juegos de arrastre valid .

¡Espero que ayude!