Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Greenpeace
Guida ad HTML5: drag and drop (1/5)
Scritto da Pellegrino Principe il 17-01-2011 ore 09:54
Intel Parallel Studio XE
Per drag and drop s’intende la possibilità, per un programmatore che sta progettando un software dotato di interfaccia grafica, di far diventare un widget una sorgente di un’operazione di trascinamento (drag), oppure destinatario di un’operazione di rilascio (drop). Nella pratica, esso è effettuato compiendo le seguenti azioni:
  • si clicca con il pulsante sinistro del mouse sull’elemento sorgente del drag (starting point);
  • se l’elemento è non testuale lo si trascina direttamente, sempre tenendo premuto il pulsante sinistro del mouse;
  • se l’elemento è testuale, dapprima si seleziona un’area d’interesse, e poi la si trascina sempre tenendo premuto il pulsante sinistro del mouse;
  • si posiziona l’elemento oggetto del trascinamento su di un altro elemento destinatario del drop (end point), rilasciando il pulsante sinistro del mouse.
Il meccanismo precedentemente descritto è, però, sempre stato una prerogativa dello sviluppo di applicazioni client native, non essendoci mai state per il Web delle specifiche e delle implementazioni standard. Fortunatamente, con l’avvento di HTML5, è stata definita un’API nativa per il supporto al drag&drop, che permette finalmente di dotare le applicazioni web di questo potente meccanismo senza dover utilizzare librerie o framework JavaScript esterni e tra di loro incompatibili.

Grazie a questa libreria possiamo, in breve, rendere sorgente del drag o destinatario del drop qualunque elemento HTML e di compiere, pertanto, le consuete operazioni di trascinamento e rilascio, sia all’interno della finestra dove sono stati definiti tali elementi, sia con altre finestre del browser stesso, o appartenenti ad altre applicazioni client native. Illustriamo, dunque, le seguenti operazioni da compiere che ci consentiranno di utilizzare il drag and drop:
  • impostazione dell’attributo draggable con il valore true per gli elementi HTML che vogliamo rendere trascinabili. Esso non deve essere specificato per gli elementi a (link), img (le immagini) e i nodi di testo, che di default sono già draggabili e sono già dotati di un comportamento predefinito nell’interazione con altri elementi durante un’operazione di rilascio;
  • gestione di un evento dragstart, che viene generato quando ha inizio l’operazione di trascinamento, al fine di scegliere il dato da trasferire, un’eventuale immagine di feedback e l’effetto dell’operazione di trascinamento;
  • gestione di un evento drag, che viene generato durante l’operazione di trascinamento, al fine di fornire informazioni utili durante la predetta fase di dragging;
  • gestione di un evento dragenter, che viene generato durante l’operazione di trascinamento se il puntatore del mouse si trova, per la prima volta, all’interno di un’area di un possibile elemento destinatario del drop. Il suo handler è utilizzabile al fine di verificare se il drop è fattibile sull’elemento target e per fornire un’immagine di feedback;
  • gestione di un evento dragover, che viene generato durante l’operazione di trascinamento se il puntatore del mouse si muove su di un elemento target, al fine di fornire informazioni quali, ad esempio, la posizione del mouse all’interno dell’area dell’elemento. Il gestore di tale evento deve però prevenire la sua azione di default, tramite la funzione preventDefault, al fine di evitare il divieto del drop. In pratica, possiamo dire, che l'assegnamento di questo evento su di un elemento lo indica come possibile destinatario di un drop;
  • gestione di un evento dragleave, che viene generato durante l’operazione di trascinamento, se il puntatore del mouse esce dall’area dell’elemento target o se è rilasciato. L’handler è utilizzabile al fine di rimuovere informazioni o immagini di feedback eventualmente visualizzate;
  • gestione di un evento drop, che viene generato all’atto del rilascio dell’elemento trascinato, al fine di ottenere o posizionare ciò che è stato l’oggetto del trasferimento;
  • gestione di un evento dragend, che viene generato al termine dell’operazione di dragging, al fine, ad esempio, di rimuovere dalla posizione originaria l’elemento sorgente trascinato.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Controllare uno schermo OLED con Arduino (1/2)
Successiva: JRuby 1.6 fa il passo più grande di sempre
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.287 secondi.