Interazioni via Drag&Drop

by Vittoria Marino on 22 marzo 2017

Nella user experience delle applicazioni web e mobile è frequente l’utilizzo del drag&drop per interagire con un determinato oggetto, per instaurare relazioni tra un oggetto e l’altro o per fare l’upload di un file. Insomma, il drag&drop è diventato parte della user experience che tutti ci aspettiamo.

È per questo motivo che nell’ultimo periodo Andrea mi ha proposto di integrare questa funzionalità nelle applicazioni realizzate con Instant Developer Cloud.

Oggi vi presento i due nuovi componenti frutto di questo lavoro: Interactable e Dropzone.

Interactable è basato su InteractJs, una libreria che permette di rendere un oggetto trascinabile, ridimensionabile o trasformarlo in una drop area. Per usarlo occorre mettere nella View un oggetto Interactable e specificare per quali oggetti deve essere abilitata la funzionalità. La selezione viene fatta tramite le proprietà DragAcceptedElements, DropAcceptedElements e ResizeAcceptedElements.  Nella documentazione contestuale troverete più informazioni su come valorizzarle.

Dropzone è basato su DropzoneJs, una libreria che permette di realizzare facilmente una drop area sulla quale possono essere trascinati i file da caricare sul server. Per usarlo nelle applicazioni basta creare nella View un oggetto di tipo Dropzone e l’applicazione è pronta per l’upload dei file. Il componente Dropzone è personalizzabile: si può decidere di accettare solo un certo tipo di file, di limitare il numero di file caricabili, di personalizzare l’aspetto grafico, ecc.

Per mostrarvi l’intuitività delle interfacce realizzate con questi componenti abbiamo preparato per voi due esempi.

Per provare il drag&drop tra oggetti aprite l’esempio Interact. Il menu iniziale presenta tre scelte: Tree, Double List e Calendar.

La videata Tree mostra quanto è semplice usare il drag&drop per spostare gli elementi di un albero tra un nodo e l’altro: basta toccarne uno e trascinarlo su un altro nodo. Gli elementi possono essere eliminati trascinandoli sull’icona del cestino in fondo alla pagina.

Nella videata Double List, invece, è possibile spostare un elemento tra due diverse DataMap semplicemente trascinandolo.

Infine la videata Calendar mostra una semplice agenda in cui è possibile spostare gli eventi da un giorno all’altro trascinandoli all’interno della settimana. Ridimensionando un evento se ne cambia la durata, come accade con le applicazioni calendario a cui siamo abituati.

Per provare l’upload via drag&drop aprite l’esempio Dropzone e trascinate un’immagine nell’apposita area: verrà fatto l’upload e l’immagine sarà mostrata in anteprima. Nella sezione sottostante è sempre visibile l’elenco dei file presenti sul server. Le anteprime possono essere eliminate senza che venga cancellato il file relativo.

In questo esempio la Dropzone accetta soltanto file di tipo immagine, se provate a trascinare altri tipi di file, per esempio un pdf, l’upload non verrà fatto.

Che ne dite?

{ 6 comments… read them below or add one }

1 utente pagante 22 marzo 2017 alle 23:51

sarebbe bellissimo poterlo utilizzare…
in instant developer FOUNDATION.
scusate ma a molti qui che vi han supportato per anni gli è scesa la catena di rosicare per inde cloud
l’ho detta.

2 Gianfranco 23 marzo 2017 alle 07:59

… e Instant Developer Foundation rimane a bocca asciutta?

3 Giuseppe Lanzi 23 marzo 2017 alle 10:24

@Gianfranco ma certo che no! 🙂 Già qualche settimana fa Andrea ha anticipato due miglioramenti importanti per Foundation e tra un paio di settimane uscirà la 16.0 con le note di rilascio. Anche in questa versione abbiamo fatto un bel po’ di cose interessanti, tieniti pronto a leggere il post di presentazione.

4 Giuseppe Lanzi 23 marzo 2017 alle 10:25

@utente se c’è qualcuno che rosica ci dispiace davvero e non vogliamo far restare questa voce inascoltata. Contattaci privatamente per poterne parlare insieme.

Tuttavia ho due buone notizie: il comportamento di interactable è già replicabile su foundation con il generic drag&drop introdotto in versione 8.5 (ed eventualmente un book per avere interfacce particolarmente custom); il caricamento file via drag&drop di Dropzone è stato introdotto con il multi upload HTML5 in versione 12.

Ultimamente abbiamo scritto diversi articoli sull’edizione Cloud, semplicemente perché è una novità che prima non c’era e che abbiamo sviluppato per darvi più strumenti per affrontare le nuove sfide del mercato.

Comunque siamo qui per ascoltarti, contattaci per farci capire di cosa senti la mancanza.

5 Rainer 30 marzo 2017 alle 11:40

Non potete mettere questo sviluppo tra i progetti pubblici del sito ?
Grazie

6 Giuseppe Lanzi 3 aprile 2017 alle 17:46

Sì, mi sembra un’ottima idea.
Ora li potete trovare tra gli esempi della console di Instant Developer Cloud.

Leave a Comment

Previous post:

Next post: