Aggiungi classe CSS a un elemento durante il trascinamento con wQuery

Question

È possibile aggiungere una classe CSS a un elemento mentre viene trascinato su una determinata area e sostituire la classe una volta che l'elemento viene rilasciato?

Non sto cercando questa funzione ovunque, ma solo su un'area specifica.

Answer 1

Non l'ho provato, ma il primo pensiero che ho è di raccogliere le coordinate x, y, l'altezza, la larghezza dell'area in cui si desidera che cambi la classe. Quindi, assumendo che è possibile ottenere le coordinate x, y dell'oggetto trascinato, quando l'oggetto si trova all'interno di tali limiti, aggiungere la classe, quando si trova all'esterno della classe remove.

Answer 2

Sì, è certamente possibile. L'interfaccia utente di jQuery fornisce alcune utili opzioni ed eventi per farlo.

Per i principianti, l'elemento trascinabile può sempre essere definito dalla classe .ui-draggable-dragging durante il trascinamento.

Il metodo droppable fornisce quindi un evento chiamato over che eseguirà una funzione ogni volta che un oggetto trascinabile valido viene posizionato su di esso. Quindi, all'interno di quella funzione possiamo fare riferimento a .ui-draggable-dragging e aggiungere una classe ad esso.

Out e drop vengono offerti anche eventi e possiamo indirizzare l'elemento trascinabile allo stesso modo. Ecco come dovrebbe apparire:

$("#droppable").droppable({ 
    // tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch' 
    tolerance: 'intersect', 
    // Add .hoverClass whenever #draggable is being hovered over #droppable 
    over: function(event, ui) { 
     $('.ui-draggable-dragging').addClass('hoverClass'); 
    }, 
    // Remove .hoverClass whenever #draggable is no longer hovered over #droppable 
    out: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass'); 
    }, 
    // Add .dropClass whenever #draggable is dropped on #droppable 
    drop: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass'); 
    } 
}); 

Il codice di cui sopra aggiunge una classe quando #draggable interseca con #droppable e quindi sostituisce quella classe, quando #draggable è sceso a #droppable. Inoltre, .hoverClass viene rimosso quando i due elementi non si intersecano più. Ecco uno working example on jsfiddle.

Spero che questo aiuti.

Answer 3

ho trovato interessante utilizzare l'oggetto ui preparato fornito dal callback in modo da non dover eseguire nuovamente una query dom. ogni piccolo guadagno di prestazioni è buono soprattutto quando si utilizza il drag & goccia ;-) ...

over: function(e, ui) { 
    $(ui.helper[0]).addClass("success"); 
    } 

...

migliore.