jQuery

Droppable : gestire il rilascio di elementi trascinati in jQuery

jQuery

Seconda e ultima parte del processo di drag and drop di elementi in jQuery. Dopo aver visto come trascinare elementi in jQuery, eccoci a capire come gestire il rilascio di un elemento ‘draggato’.

Anche in questo caso, jQuery riesce con il plugin droppable a fornire una soluzione ottimale che riesce a realizzare un contenitore in cui gli elementi trascinabili possono essere rilasciati e gestiti.

jQuery UI Droppable plugin consente, in sostanza, di gestire con molte opzioni il rilascio di elementi ed oggetti in modo abbastanza simile a quanto visto per il ‘collega’ Draggable.

Vediamo subito un esempio :

<script type=”text/javascript”>    
$(document).ready(function() {

  $(“#mydiv”).draggable();
  $(“#div_destinazione”).droppable({
    drop: function(event, ui) {
      $(this).find(‘p’).html(‘Eccomi!’);
    }
  });
});

</script>

<div id=”mydiv”>
  <p>Spostami all’interno del box qui accanto…</p>
</div>
<div id=”div_destinazione”>
  <p>Portami qui dentro!</p>
</div>

 

Potete vedere una demo simile e questo esempio a questo link.

Vediamo di scendere in dettaglio su alcuni particolari di Droppable. Gli eventi che è possibile associare a questo plugin sono :

  • activate: indica l’inizio del movimento dell’elemento ‘draggabile’ che fa riferimento a quello che sarà accettato dall’elemento ‘droppabile’;
  • deactive: indica la fine del movimento dell’elemento ‘draggabile’ accettato;
  • over: l’elemento ‘draggabile’ é è sopra a quello ‘droppabile’ rispetto all’opzione tolerance che vedremo sotto;
  • out: indica che l’elemento ‘draggabile’ sta uscendo da quello ‘droppabile’;
  • drop: indica che l’elemento ‘droppabile’ è stato appena rilasciato.

 

Ora, risulta più chiara la sintassi drop: function(event, ui) e quanto segue dopo. Ma non é tutto. Infatti, eccovi alcune importanti opzioni messe a disposizione dal plugin Droppable :

accept :  Consente di stabilire quale elemento ‘draggable’ sarà accettato. Anche se come default tutti posso essere accettati, é possibile indicare, ad esempio, solo il selettore del solo elemento accettato ecc

activeClass :  Opzione importante che consente di aggiungere una classe all’elemento droppable mentre durante il drop.

     -> $(“#div_destinazione”).droppable({ activeClasse: ‘highlight’…

hoverClass : Opzione importante che consente di aggiungere una classe all’elemento droppable quando l’elemento ‘draggabile’ é fuori da quello ‘droppabile’.

tolerance : Con questa opzione si definisce la modalità con cui si considera avvenuto il drop.  Vediamo le opzioni di stringhe possibili (il default é ‘intesect’):

  • ‘fit’ => tutto l’elemento ‘draggabile’ deve essere necessariamente sopra il ‘droppabile’;
  • ‘intersect’ => almeno il 50% di sovrapposizione;
  • ‘pointer’ => il mouse deve essere sopra il ‘droppabile’;
  • ‘touch’ => è sufficiente che l’elemento draggabile sia sovrapposto per una quantità qualsiasi (insomma, appena viene a contatto).

     -> $(“#div_destinazione”).droppable({ tolerance: ‘touch’….

 

Se avete qualche dubbio, come al solito ci sono i commenti!

Droppable : gestire il rilascio di elementi trascinati in jQuery
Vota questo articolo

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Guarda anche

Close