Drag-and-drop: come utilizzare gli elementi dell'interfaccia utente

La cosa più semplice è prendere e mettere qualcosa, piuttosto che scrivere ciò che è necessario prendere e dove metterlo. Certamente, senza un mouse o un dispositivo simile ad esso, non sceglierai nulla e non specificheresti nulla, ma anche nello stato attuale delle cose, usare l'idea di "trascina e rilascia" è molto naturale e confortevole.

Lo scopo dell'idea non è solo i negozi online, le biblioteche elettroniche, i sistemi di ricerca o di informazione, ma anche la sfera delle applicazioni. L'idea è molto applicabile nello sviluppo di siti e dei loro elementi, creati e gestiti in modo interattivo, senza la partecipazione del programmatore.

Descrizione dell'idea

Scegli, sposta e metti: l'idea è naturale e confortevole. È incredibile che lei non sia nata quando il mouse è diventato un computer accessorio indispensabile.

L'esempio più ovvio è la selezione del prodotto in un negozio online. Prendi il prodotto desiderato con il mouse e trascinalo nel carrello - semplicemente, naturalmente e comodamente. Download di file: prendere un documento al di fuori della finestra del browser e posizionarlo sull'elemento della pagina, iniziando così il trasferimento del documento sul server, è anche un'idea pratica.

Per lo sviluppatore, l'idea di trascinare e rilasciare è di manipolare gli elementi della pagina senza ricalcolare manualmente le coordinate e le dimensioni dei tag, la possibilità di selezionare più elementi e di allinearli, nonché di spostare i lati dei tag di blocco.

HTML e CSS sono linguaggi eccellenti per la descrizione dei tag e dei loro stili, ma quando uno sviluppatore ha la capacità di manipolare interattivamente elementi di una pagina senza ricalcolare manualmente le coordinate e le dimensioni, questo rende il lavoro più comodo ed efficiente.

Semplice trasferimento di file

"Drag and drop": la traduzione dall'inglese al russo suona letteralmente "drag and drop". In pratica, questo suona e agisce meglio: scelto, trasferito e rilasciato - in modo semplice e naturale.

Implementare sulla pagina il trasferimento dei file alla pagina, al server o per altri usi è molto semplice.

In questo esempio, il mouse ha selezionato diversi file sul desktop (immagine a sinistra). Sulla selezione, il tasto sinistro del mouse è stato premuto e il "selezionato" è andato al cestino. Il browser stesso ha mostrato come ciò accada, ha scritto il suggerimento "copia" e ha creato i contorni dei file spostati.

Quando il mouse è apparso sopra il cestino, il visitatore ha rilasciato il pulsante sinistro del mouse, l'evento di trascinamento della selezione ha avuto luogo e nella pagina del sito Web (immagine in basso) il codice JavaScript è stato in grado di ricevere ed elaborare tutti i file che il visitatore ha fornito alla pagina (sito Web).

Descrizione di implementazione

Il codice che esegue questa procedura è molto semplice. Anche uno sviluppatore inesperto può ripeterlo in qualsiasi caso d'uso.

Qui, l'interfaccia utente è rappresentata da due tag: scPlaceFile (questo è il cestino stesso, in cui è necessario inserire i file) e scPlaceFiles (questo è il risultato dell'elaborazione dei file, in questo caso la loro lista).

La logica della pagina è la seguente. Quando la pagina viene caricata nel browser, il gestore di eventi "ondrop" viene assegnato nel carrello - per essere inserito, gli altri eventi sono bloccati e non utilizzati.

La pagina funziona in modalità normale, ma non appena il visitatore seleziona i file e li trascina sull'immagine del cestino, cioè sul tag scPlaceFile, viene avviato l'evento "file arrivati".

Questo gestore visualizza semplicemente un elenco di file. Il loro numero è in event.dataTransfer.files.length e le informazioni su ogni file in event.dataTransfer.files [i] .name. Lo sviluppatore determina cosa fare con i dati ricevuti, in questo caso viene semplicemente creato l'elenco dei file ricevuti.

Dopo l'elaborazione, l'evento è bloccato e non distribuito. Questo è necessario in modo che il browser non si impegni in attività amatoriali e non interferisca nell'elaborazione delle informazioni ricevute.

DnD e dati esterni

Il caricamento di immagini sul server tramite trascinamento della selezione è una pratica comune dell'utilizzo di questa tecnologia. Di norma, lo sviluppatore crea un modulo per caricare un file (1), che funziona nel solito modo (2). Il visitatore può normalmente selezionare i file e caricarli.

Tuttavia, se un visitatore effettua un "trascinamento della selezione" in un determinato punto del modulo, il campo del nome del file (file) verrà compilato automaticamente.

Questa è una buona decisione. Supponendo che non ci sia il mouse sul computer è, ovviamente, molto difficile. Ma è meglio sviluppare un'interfaccia utente nella solita versione e nell'implementazione DnD.

DnD e dati interni

La cura degli interessi del visitatore è sempre importante, ma contano anche i problemi dello sviluppatore. È possibile implementare il trascinamento della selezione non solo con mezzi standard, ma anche gestendo gli eventi del mouse sugli elementi della pagina.

Il compito di calcolare le coordinate dei tag e le loro dimensioni avviene costantemente. Il calcolo manuale è una buona pratica, ma la versione interattiva è più conveniente. Tutti i tag hanno sempre una forma rettangolare e, tenendo traccia degli eventi "mouse" sui lati degli elementi, è possibile creare la possibilità di spostare automaticamente gli elementi nel punto giusto sulla pagina o di modificarli.

Gestire l'evento facendo clic con il pulsante del mouse - memorizzando le coordinate del sito di clic, ad esempio, uno dei lati dell'elemento. Muovendo il mouse - il lato si muove nella giusta direzione. Rilasciando il pulsante del mouse, il lato si arresta e le sue coordinate cambiano. Quindi puoi cambiare la posizione dell'elemento o la sua dimensione.

Formalmente, questo non è "drag and drop", ma l'effetto è simile e pratico. Avendo creato gestori universali per qualsiasi elemento della pagina, puoi ottenere un buon risultato interattivo, accelerare lo sviluppo e semplificare il codice.

Programmazione visiva e manuale

Il mouse sul computer e le dita sullo smartphone sono approcci completamente diversi per l'implementazione dell'interfaccia utente (visitatore, sviluppatore). È un requisito completamente naturale e moderno di compatibilità cross-browser.

Tutto questo insieme rende difficile la creazione di pagine, ma applicando l'idea di "trascina e rilascia" nella sua forma standard, utilizzando i suoi eventi, combinando questa idea con eventi ordinari sugli elementi, è possibile implementare un meccanismo attraverso il quale la creazione della pagina avverrà visivamente.

Consideriamo ora la scelta di un elemento o di un elemento. Il fatto della selezione è l'aspetto del menu di scelta rapida, ad esempio l'obiettivo è l'allineamento del selezionato (sinistra, destra, centro) o la distribuzione di elementi verticalmente o orizzontalmente con lo stesso passo, o modificare le loro dimensioni (minimo, massimo).

Il ricalcolo automatico delle coordinate e delle dimensioni è preferibile al manuale. Meno errori: obiettivo più veloce. Inoltre, puoi creare una pagina in un browser, salvare la posizione e la dimensione degli elementi. Aprendo questa pagina sul tuo smartphone, puoi correggere i valori di coordinate e dimensioni e ricordarli per uno specifico modello di smartphone o versione del browser.

Quindi la stessa pagina senza la conformità manuale con i requisiti di compatibilità cross-browser avrà dati diversi per la visualizzazione su diversi dispositivi e in diversi browser.

Se si consente al visitatore di eseguire queste procedure da solo, oltre a selezionare gli elementi della pagina desiderati tra quelli forniti dallo sviluppatore, è possibile fornire la compatibilità tra browser e le funzionalità richieste della pagina, tenendo conto delle visualizzazioni dell'utente.