Jquery UI Droppable: come posso utilizzare diversi valori hoverClass in base a qualche logica?

Question

Sto utilizzando le funzioni della libreria JQuery UI droppable e desidero fornire un feedback visivo all'utente quando si posiziona su un target trascinabile. Per questo posso usare facilmente l'opzione hoverClass per specificare quale classe usare quando hanno un oggetto trascinabile al passaggio del mouse.

Ma quello che voglio fare è usare un diverso valore hoverClass a seconda della logica. Fondamentalmente, ci sono un certo numero di aree che sono "droppabili", e c'è una serie di elementi che possono essere trascinati e rilasciati - tuttavia, non tutti gli elementi possono essere rilasciati su tutte le aree. Quindi mi piacerebbe avere, ad esempio, uno sfondo verde se il drop è valido, e uno sfondo rosso se il drop non è valido.

Come si può fare? So quale logica voglio usare, ma dove posso aggiungere la logica. Ovviamente ha bisogno di essere da qualche parte in cui posso accedere all'elemento che viene trascinato e al potenziale elemento di destinazione di rilascio.

Il mio codice semplice finora è la seguente:

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    hoverClass: "DropTargetValid" 
}); 

Answer 1

$(".DropItem").droppable({ 
    tolerance: "touch", 
    hoverClass: "DropTargetValid", 
    over: function(event, ui) { 
     console.log(ui.draggable); // the draggable object 
     console.log($(this)); // the droppable object 
    } 
}); 

Questo dovrebbe farlo. Su quell'evento verrà attivato su tutti gli elementi .DropItem. Potete trovare ulteriori informazioni sul eventi API disponibile qui: http://api.jqueryui.com/droppable/

Answer 2

Credo che il problema sta cercando di fare con la classe stessa, quando droppable ha il proprio evento hover, chiamato overjQuery droppable API #over

Quindi che ci si vuole :

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function(event, ui) { 
     // ... logic goes here 
    } 
}); 

Answer 3

Le altre risposte sono esattamente ciò che stavo cercando. Tuttavia, voglio approfondire un po 'qui per dare un esempio migliore di come elaborare la logica.

Diciamo per esempio, con un semplice HTML come segue. Questo HTML ha fondamentalmente 4 oggetti trascinabili, e 4 possibili destinazioni di rilascio:

<div style="margin-bottom:20px;"> 
    <div data-id="1" class="DragItem">I am 1</div> 
    <div data-id="2" class="DragItem">I am 2</div> 
    <div data-id="3" class="DragItem">I am 3</div> 
    <div data-id="4" class="DragItem">I am 4</div> 
</div> 
<div> 
    <div data-id="123" class="DropItem">I accept 1, 2 and 3</div> 
    <div data-id="23" class="DropItem">I accept 2 and 3</div> 
    <div data-id="34" class="DropItem">I accept 3 and 4</div> 
    <div data-id="1234" class="DropItem">I accept all</div> 
</div> 

Come si può vedere, ho usato data-* attributi per memorizzare i valori identificativi specifici. Gli ID su DragItem identificano l'oggetto drag e gli ID su DropItem contengono tutti i valori validi.

Il javascript che elabora questa logica, e quindi applica le classi corretta è la seguente:

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function (event, ui) { 
     var dropItem = $(this); 
     var dragItem = $(ui.draggable); 
     var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1; 
     if (valid) { 
      dropItem.addClass("DropTargetValid"); 
     } else { 
      dropItem.addClass("DropTargetInvalid"); 
     } 
    }, 
    out: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    }, 
    deactivate: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    } 
}); 

Come si vede, sto facendo un semplice "non stringa contiene" controllo di logica. Questo va bene per i piccoli numeri, ma se c'è sempre bisogno di fare più di 9 oggetti avremmo bisogno di una stringa più affidabile nel valore DropItem data-id.

Uso anche gli eventi out e deactivate per svuotare le classi applicate. In questo esempio ho duplicato il codice, ma questo potrebbe essere facilmente sostituito con una singola funzione utilizzata da entrambi gli eventi.

Infine, nel momento in cui avete tutti aspettando, here is a working example.

Answer 4

utilizzare gli eventi Draggable Start/Stop per aggiungere e rimuovere le classi alle vostre dropzones.

http://api.jqueryui.com/draggable/#event-start