Tecnologia Drag and Drop in Android. Tecnica di trascinamento della selezione utilizzando jQuery Che cos'è il trascinamento della selezione?

Il modo più semplice è prendere qualcosa e metterlo, piuttosto che scrivere cosa prendere e dove metterlo. Certo, senza mouse, o un dispositivo simile, non puoi scegliere nulla e non indicare nulla, ma anche allo stato attuale delle cose, l'uso dell'idea di "trascina e rilascia" è molto naturale e confortevole.

La portata dell'idea è lontana dai soli negozi online, biblioteche digitali, ricerca o sistemi informativi, ma anche il campo applicato. L'idea è molto applicabile nello sviluppo di siti e dei loro elementi, creati e mantenuti in modo interattivo, senza la partecipazione di un programmatore.

Descrizione dell'idea

Seleziona, sposta e metti: l'idea è naturale e conveniente. È incredibile che non sia nato quando il mouse è diventato un accessorio indispensabile per il computer.

L'esempio più ovvio è la scelta di un prodotto in un negozio online. Prendere il prodotto desiderato con il mouse e trascinarlo nel carrello è semplice, naturale e conveniente. Caricamento di file: anche un'idea pratica è portare un documento fuori dalla finestra del browser e inserirlo in un elemento della pagina, avviando così il trasferimento del documento al server.

Per uno sviluppatore, l'idea del "trascinamento della selezione" è quella di manipolare gli elementi della pagina senza ricalcolare manualmente le coordinate e le dimensioni dei tag, la possibilità di selezionare diversi elementi e allinearli, nonché spostare i lati dei tag di blocco.

HTML e CSS sono linguaggi eccellenti per descrivere i tag e i loro stili, ma quando uno sviluppatore ha la capacità di manipolare in modo interattivo gli elementi della pagina senza ricalcolare manualmente coordinate e dimensioni, questo rende il lavoro più comodo ed efficiente.

Trasferimento file semplice

"Trascina e rilascia": la traduzione dall'inglese al russo suona letteralmente "trascina e rilascia". In pratica, suona e funziona meglio: scegli, trasferisci e rilascia - in modo semplice e naturale.

È molto semplice implementare su una pagina il trasferimento di file su una pagina, su un server o per altri usi.

V questo esempio il mouse ha selezionato diversi file sul desktop (immagine a sinistra). Sulla selezione, è stato premuto il tasto sinistro del mouse e il selezionato "è andato" nel carrello. Il browser stesso ha mostrato come ciò accade, ha scritto un suggerimento "copia" e ha creato i contorni dei file da spostare.

Quando il mouse è stato sopra il cestino, il visitatore ha rilasciato pulsante sinistro mouse, si è verificato l'evento “drag and drop” e sulla pagina del sito (figura in basso) il codice JavaScript è stato in grado di ricevere ed elaborare tutti i file che il visitatore ha fornito alla pagina (sito).

Descrizione dell'implementazione

Il codice che esegue questa procedura è molto semplice. Anche uno sviluppatore alle prime armi può ripeterlo in ogni caso d'uso.

Qui l'interfaccia utente è rappresentata da due tag: scPlaceFile (questo è il cestino stesso, dove è necessario inserire i file) e scPlaceFiles (questo è il risultato dell'elaborazione dei file, in questo caso un elenco di essi).

La logica della pagina è la seguente. Quando la pagina viene caricata nel browser, il gestore dell'evento "ondrop" viene assegnato nel carrello - per dirlo, il resto degli eventi viene bloccato e non utilizzato.

La pagina funziona normalmente, ma non appena il visitatore seleziona i file e li trascina sull'immagine del carrello, ovvero sul tag scPlaceFile, verrà avviata l'elaborazione dell'evento "file arrivati".

Questo gestore visualizza semplicemente un elenco di file. Il loro numero è in event.dataTransfer.files.length e le informazioni su ciascun file sono in event.dataTransfer.files [i] .name. Cosa fare con i dati ricevuti è determinato dallo sviluppatore, in questo caso viene semplicemente formato un elenco dei file ricevuti.

Una volta elaborato, l'evento viene bloccato e non propagato. Ciò è necessario affinché il browser non sia autonomo e non interferisca con il trattamento delle informazioni ricevute.

DnD e dati esterni

Il caricamento di immagini su un server tramite trascinamento è una pratica comune in questa tecnologia. In genere, lo sviluppatore crea un modulo di caricamento file (1) che funziona nel modo consueto (2). Il visitatore può normalmente selezionare i file e caricarli.

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

Questo buona decisione... È, ovviamente, molto difficile ammettere che non ci sia il mouse sul computer. Ma è meglio progettare l'interfaccia utente in la solita versione e nell'implementazione di DnD.

DnD e dati interni

Prendersi cura degli interessi del visitatore è sempre importante, ma anche le preoccupazioni dello sviluppatore sono importanti. Il trascinamento della selezione può essere implementato non solo con mezzi standard, ma anche gestendo gli eventi del mouse sugli elementi della pagina.

Il compito di calcolare i valori delle coordinate dei tag e delle loro dimensioni sorge costantemente. Il calcolo manuale è una buona pratica, ma l'opzione interattiva è più conveniente. Tutti i tag sono sempre rettangolari e, tenendo traccia degli eventi del mouse ai lati degli elementi, puoi creare la possibilità di spostare automaticamente gli elementi nella posizione desiderata sulla pagina o modificarli.

Gestire l'evento del clic di un pulsante del mouse - memorizzare le coordinate del luogo del clic, ad esempio uno dei lati di un elemento. Muovi il mouse: il lato si sposta nella direzione desiderata. Rilasciando il pulsante del mouse - il lato si ferma e le sue coordinate cambiano. In questo modo è possibile modificare la posizione dell'elemento o la sua dimensione.

Questo non è formalmente "trascina e rilascia", ma l'effetto è simile e pratico. Creando gestori universali per qualsiasi elemento della pagina, puoi ottenere buoni risultati interattivi, accelerare lo sviluppo e semplificare il tuo codice.

Programmazione visiva e manuale

Mouse su un computer e dita su uno smartphone - assolutamente approcci diversi all'implementazione dell'interfaccia utente (visitatore, sviluppatore). Questo è un requisito naturale e moderno per la compatibilità tra browser.

Tutto questo insieme complica la creazione delle pagine, ma applicando l'idea del "drag and drop" nella sua forma standard, usando i suoi eventi, combinando questa idea con eventi ordinari sugli elementi, puoi implementare un meccanismo in cui la creazione del la pagina verrà visualizzata visivamente.

Ora diamo un'occhiata alla selezione di uno o più articoli. Il fatto della selezione è l'aspetto di un menu di scelta rapida, ad esempio, l'obiettivo è allineare il selezionato (sinistra, destra, centro) o distribuire gli elementi verticalmente o orizzontalmente con lo stesso passaggio o modificarne le dimensioni (minimo, massimo) .

Il ricalcolo automatico delle coordinate e delle dimensioni è preferibile al ricalcolo manuale. Meno errori: l'obiettivo viene raggiunto più velocemente. Inoltre, puoi creare una pagina in un browser, salvare la posizione e le dimensioni degli elementi. Aprendo questa pagina su uno smartphone è possibile 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 il requisito cross-browser avrà dati diversi su cui visualizzare diversi dispositivi e in vari browser.

Se consenti al visitatore di eseguire queste procedure da solo, oltre a selezionare gli elementi della pagina necessari tra quelli forniti dallo sviluppatore, puoi garantire la compatibilità tra browser e la funzionalità richiesta della pagina, tenendo conto dell'opinione dell'utente .

Trascina e rilascia HTML le interfacce consentono alle applicazioni di utilizzare le funzionalità di trascinamento della selezione nei browser. L'utente può selezionare trascinabile elementi con un mouse, trascina quegli elementi su a droppabile elemento e rilasciarli rilasciando il pulsante del mouse. Una rappresentazione traslucida del trascinabile elementi segue il puntatore durante l'operazione di trascinamento.

Per i siti web, le estensioni e le applicazioni XUL, puoi personalizzare gli elementi che possono diventare trascinabile, il tipo di feedback il trascinabile elementi producono, e il droppabile elementi.

Questa panoramica del trascinamento della selezione HTML include una descrizione delle interfacce, i passaggi di base per aggiungere il supporto del trascinamento della selezione a un'applicazione e un riepilogo dell'interoperabilità delle interfacce.

Trascina eventi

Nota: Né gli eventi dragstart né dragend vengono attivati ​​quando si trascina un file nel browser dal sistema operativo.

Interfacce

Le basi

Questa sezione è un riepilogo dei passaggi di base per aggiungere la funzionalità di trascinamento della selezione a un'applicazione.

Identifica cosa è trascinabile

Fare un elemento trascinabile richiede l'aggiunta dell'attributo trascinabile e del gestore di eventi globale ondragstart, come mostrato nell'esempio di codice seguente:

Questo elemento è trascinabile.

Per ulteriori informazioni, vedere:

Gestire la goccia effetto

Il gestore per l'evento di rilascio è libero di elaborare i dati di trascinamento in un modo specifico dell'applicazione.

In genere, un'applicazione utilizza il metodo getData() per recuperare elementi trascinati e quindi elaborarli di conseguenza. Inoltre, la semantica dell'applicazione può variare a seconda del valore di

Dove gli elementi della GUI sono implementati usando pseudo-grafica) usando un mouse o un touch screen.

Il metodo è implementato da "cattura" (premendo e tenendo premuto il tasto principale ( il primo, più spesso il tasto sinistro del mouse) di un oggetto visualizzato sullo schermo del computer, disponibile a livello di programmazione per tale operazione, e spostandolo in un altro luogo (per cambiarne la posizione) o "lanciandolo" su un altro elemento (per chiamare il corrispondente azione prevista dal programma). In relazione alle finestre (anch'esse capaci di muoversi in questo modo), questo termine solitamente non viene utilizzato.

Azioni di base e le più semplici esempi le azioni drag-and-drop sono: spostare un oggetto, spostare un oggetto da un pannello all'altro, anche se in modo moderno sistemi operativi ah il drag-and-drop è ampiamente utilizzato ed è uno dei modi principali di interagire con un computer in un'interfaccia utente grafica.

Gli oggetti per il movimento possono essere i seguenti elementi dell'interfaccia: icone del desktop (icone), barre degli strumenti mobili, collegamenti ai programmi nella barra delle applicazioni (a partire da Win XP), elementi TreeView, una stringa di testo, una cella DataGridView e anche elementi OLE. Gli oggetti possono essere spostati sia all'interno di una determinata area definita, all'interno di una finestra, tra i pannelli di una finestra, sia tra finestre diverse.

L'evento di trascinamento deve essere attivato da un'azione dell'utente. Molto spesso, questa azione consiste nel fare clic con il pulsante sinistro del mouse su un elemento (questo evento è chiamato MouseDown), che può essere spostato nel suo contenitore. Alcuni componenti hanno i propri eventi di avvio drag-n-drop, ad esempio un TreeView ha un evento ItemDrag.

Fondazione Wikimedia. 2010.

Guarda cos'è il "Drag-and-drop" in altri dizionari:

Trascinare e rilasciare- 〈[dræg ənd drɔ̣p] n .; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. trascina "ziehen" + e "und" + rilascia "fallen…… Universal-Lexikon

La forma di esecuzione di qualsiasi azione nelle interfacce utente grafiche, che implica l'uso di mouse del computer... Tradotto dall'inglese significa letteralmente: trascina e rilascia. L'azione viene eseguita azionando quelli visibili sullo schermo ... ... Glossario aziendale

trascinare e rilasciare- (informatica) Per spostare un'icona, un file, ecc. sullo schermo usando un mouse e rilasciarlo in un punto diverso (aggettivo trascina e rilascia) Voce principale: trascina... Dizionario inglese utile

trascinare e rilasciare- IT per spostare qualcosa da un'area all'altra dello schermo di un computer utilizzando il mouse: "Il software consente di trascinare e rilasciare elementi per le immagini della pagina, il testo, ecc. dovunque tu voglia. Voce principale: trascina... Termini finanziari e commerciali

trascinare e rilasciare- UK US verbo n.; Gen.:; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)