Parlando dell'interfaccia utente grafica, non si può non dire della tecnologia Lagna e Goccia (letteralmente: Tira e lancia).

Questa tecnologia si basa su elementi di trascinamento della selezione GUI dalla sorgente al ricevitore. L'interfaccia è accessibile solo con un mouse (touchpad, trackball) o touch screen.

Un elemento trascinabile viene afferrato e trattenuto con il mouse mentre viene trascinato contemporaneamente in una posizione diversa. Quando il mouse è nella posizione corretta, il pulsante del mouse viene rilasciato, rilasciando l'oggetto.

Tuttavia, l'interfaccia Drag'n Drop dovrebbe essere distinta dai controlli dell'interfaccia che hanno metodi nei loro metodi responsabili dello spostamento, implementati allo stesso modo. Ad esempio, una finestra (modulo) ha la possibilità di spostarsi all'interno dello schermo (trascinando l'area del titolo). ScrollBox ha un cursore di scorrimento. Ma in entrambi gli esempi, il trascinamento è un'azione (evento) interna (per il componente) e non influisce in alcun modo su altri oggetti nel sistema.

Trascina e Drop interfaccia applicabile solo allo spostamento di un oggetto da un contenitore all'altro, anche se i contenitori sono eterogenei. Ad esempio, trascinando un file da una cartella in un'e-mail.

Interfaccia Drag and Drop nelle tecnologie web

Utilizzo delle interfacce Trascinare e rilasciare nelle tecnologie web è stata una svolta in . Esistono editor Drag and Drop offline (ad esempio, DreamWeaver) e online (ad esempio, qualsiasi moderno costruttore di siti Web.

È più facile prendere qualcosa e metterla che scrivere cosa devi prendere e dove metterlo. Ovviamente, senza un mouse o un dispositivo simile, non puoi selezionare o specificare nulla, ma anche nello stato attuale delle cose, usare l'idea del trascinamento della selezione è molto naturale e comodo.

Lo scopo dell'idea non sono solo i negozi online, biblioteche digitali, cerca o Sistemi di informazione, ma anche l'area applicata. 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. È semplicemente 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. Seleziona il prodotto desiderato con il mouse e trascinalo nel carrello: in modo semplice, naturale e conveniente. Caricamento file: anche prendere un documento fuori dalla finestra del browser e posizionarlo su un elemento della pagina, avviando così il trasferimento del documento al server, è un'idea pratica.

Per lo sviluppatore, l'idea di "drag and drop" è la manipolazione degli elementi della pagina senza ricalcolare manualmente le coordinate e le dimensioni dei tag, la possibilità di selezionare più elementi e allinearli e spostare i lati dei tag di blocco.

HTML e CSS - grandi lingue descrizioni dei tag e dei loro stili di progettazione, ma quando uno sviluppatore ha la capacità di manipolare in modo interattivo gli elementi della pagina senza ricalcolare manualmente le coordinate e le dimensioni, questo rende il lavoro più comodo ed efficiente.

Facile trasferimento di file

"Drag and drop": la traduzione dall'inglese al russo suona letteralmente come "drag and drop". In pratica, suona e funziona meglio: scegli, trasferisci e lascia andare, in modo semplice e naturale.

L'implementazione dei trasferimenti di file da una pagina a una pagina, a un server o per altri usi è molto semplice.

A questo esempio Diversi file sul desktop sono stati selezionati con il mouse (figura a sinistra). Sulla selezione, è stato premuto il pulsante sinistro del mouse e il selezionato "è andato" al carrello. Il browser stesso ha mostrato come ciò accade, ha scritto un suggerimento di "copia" e ha creato i contorni dei file spostati.

Quando il mouse è stato sopra il cestino, il visitatore ha rilasciato tasto sinistro mouse, si è verificato l'evento di trascinamento della selezione e nella pagina del sito (immagine 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 inesperto può ripeterlo in qualsiasi caso d'uso.

Qui, l'interfaccia utente è rappresentata da due tag: scPlaceFile (questo è il carrello stesso in cui vuoi mettere 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 di eventi "ondrop" viene assegnato nel carrello - put, il resto degli eventi viene bloccato e non utilizzato.

La pagina funziona normalmente, ma non appena il visitatore seleziona il file (file) e lo trascina nell'immagine del carrello, ovvero nel tag scPlaceFile, verrà elaborato l'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 di file ricevuti.

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

DnD e dati esterni

Il caricamento di immagini sul server in modalità "drag and drop" è una pratica comune in questa tecnologia. In genere, uno sviluppatore crea un modulo di caricamento file (1) che funziona nel solito modo (2). Il visitatore può modalità normale seleziona i file e caricali.

Tuttavia, se un visitatore trascina e rilascia in un determinato punto del modulo, il campo del nome del file (file) verrà compilato automaticamente.

esso buona decisione. Ovviamente è molto difficile ammettere che non ci sia il mouse sul computer. Ma è meglio sviluppare l'interfaccia utente nel modo consueto e nell'implementazione DnD.

DnD e dati interni

Prendersi cura degli interessi del visitatore è sempre importante, ma contano anche le preoccupazioni dello sviluppatore. Puoi implementare il "trascina e rilascia" non solo mezzi standard, ma anche gestendo gli eventi del mouse sugli elementi della pagina.

Il compito di calcolare i valori delle coordinate dei tag e le loro dimensioni si pone costantemente. Calcolo manuale - buona pratica, ma la versione interattiva è più conveniente. Tutti i tag sono sempre di forma rettangolare e, monitorando gli eventi del mouse sui lati degli elementi, puoi creare la possibilità di spostare automaticamente gli elementi nella posizione corretta della pagina o di modificarli.

Gestione dell'evento clic del pulsante del mouse - ricordando le coordinate della posizione del clic, ad esempio uno dei lati dell'elemento. Sposta il mouse - il lato si sposta su la giusta direzione. Rilasciando il pulsante del mouse, il lato si ferma e le sue coordinate cambiano. In questo modo puoi modificare la posizione dell'elemento o la sua dimensione.

Non è formalmente trascina e rilascia, ma l'effetto è simile e pratico. Realizzando gestori universali per qualsiasi elemento della pagina, puoi ottenere un buon risultato interattivo, velocizzare lo sviluppo e semplificare il codice.

Programmazione visiva e manuale

Un mouse su un computer e le dita su uno smartphone sono approcci completamente diversi all'implementazione dell'interfaccia utente (visitatore, sviluppatore). È un requisito completamente naturale e moderno per la compatibilità cross-browser.

Tutto questo insieme rende difficile la creazione di pagine, ma applicando l'idea di trascinare e rilasciare in essa modulo standard, utilizzando i suoi eventi, combinando questa idea con i consueti eventi sugli elementi, puoi implementare un meccanismo in cui la creazione della pagina avverrà visivamente.

Ora diamo un'occhiata alla selezione di uno o più elementi. Fatto di selezione: l'aspetto di un menu contestuale, ad esempio, l'obiettivo è allineare quello selezionato (sinistra, destra, centro) o distribuire elementi verticalmente o orizzontalmente con lo stesso passaggio o modificarne le dimensioni (minimo, massimo).

Il ricalcolo automatico delle coordinate e delle dimensioni è preferibile al 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, puoi correggere le coordinate e le dimensioni e ricordarle modello specifico versione smartphone o browser.

Pertanto, la stessa pagina senza la conformità manuale al requisito di compatibilità tra browser avrà dati diversi su cui visualizzare vari dispositivi e in diversi browser.

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

Per la libreria VCL, Borland ha implementato la propria versione dell'interfaccia Drag&Drop (tradotta come "drag"). Questa interfaccia è interna: puoi inviare e ricevere qualsiasi controllo Delphi all'interno del modulo "(tranne il modulo stesso). È implementato senza utilizzare le corrispondenti funzioni dell'API di Windows: devono essere utilizzate durante l'organizzazione della comunicazione con altre attività trascinando e rilasciando .

Premendo il tasto sinistro del mouse sopra il controllo, possiamo "trascinarlo" su qualsiasi altro elemento. Dal punto di vista del programmatore, ciò significa che nei momenti di trascinamento e rilascio del tasto vengono generati determinati eventi che trasmettono tutte le informazioni necessarie: un puntatore all'oggetto trascinato, le coordinate correnti del cursore, ecc. Il ricevitore dell'evento è l'elemento su cui il questo momento il cursore si trova. Il gestore di un tale evento deve dire al sistema se il controllo dato accetta o meno l'"invio". Quando il pulsante viene rilasciato sul controllo del ricevitore, vengono attivati ​​uno o due altri eventi, a seconda della disponibilità del ricevitore.

Annulla Trascina Annulla l'operazione di trascinamento della selezione o di trascinamento corrente.

Funzione FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

La funzione restituisce un oggetto della classe base TControl , che si riferisce alla posizione dello schermo con le coordinate specificate dal parametro Pos. Questa funzione viene utilizzata per determinare il potenziale destinatario di un'operazione di trascinamento della selezione o trascinamento. Se non esiste alcun controllo della finestra per la posizione specificata, la funzione restituisce zero . Il parametro AllowDisabled determina se verranno presi in considerazione gli oggetti disabilitati.

Funzione IsDragObject(Mittente: TObject): Booleano;

La funzione determina se l'oggetto specificato nel parametro Sender è un discendente della classe TDragObject . Questa funzione può essere utilizzato come parametro Source nei gestori di eventi OnDragOver e OnDockOver per determinare se l'oggetto trascinato verrà accettato. Funziona anche IsDragObjectpuò essere utilizzato come parametro Source nei gestori di eventi OnDragDrop e OnDockDrop per interpretare correttamente l'oggetto trascinato.

DragMode, proprietà DragCursor, metodi BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, parametro Accept

Il processo di trascinamento delle informazioni da un oggetto all'altro con il mouse è ampiamente utilizzato in Widows: puoi spostare file tra cartelle, spostare le cartelle stesse e altro ancora.

Tutte le proprietà, i metodi e gli eventi associati al processo di trascinamento della selezione sono definiti nella classe TControl, che è la madre di tutti i componenti visivi Delphi. Pertanto, sono comuni a tutti i componenti.

L'inizio del trascinamento è determinato dalla proprietà DragMode, che può essere impostata in fase di progettazione o uguale a livello di codice a dmManual o dmAutomatic. Il valore di dmAutomatic (automatico) determina l'avvio automatico del processo di trascinamento quando l'utente fa clic con il pulsante del mouse sul componente. Tuttavia, in questo caso, l'evento OnMouseDown associato all'utente che preme il pulsante del mouse non si verifica affatto per questo componente.

L'interfaccia per il trasferimento e la ricezione dei componenti è apparsa molto tempo fa. Fornisce l'interazione tra due controlli durante l'esecuzione dell'applicazione. In questo caso, possono essere eseguite tutte le operazioni necessarie. Nonostante la semplicità di implementazione e l'età dello sviluppo, molti programmatori (soprattutto principianti) considerano questo meccanismo oscuro ed esotico. Tuttavia, l'uso del trascinamento della selezione può essere molto utile e facile da implementare. Ora verificheremo questo.

Affinché il meccanismo funzioni, è necessario configurare di conseguenza due controlli. Uno deve essere la fonte (Source), il secondo - il ricevitore (Target). In questo caso, la sorgente non si sposta da nessuna parte, ma viene solo registrata come tale nel meccanismo.

Credimi, è abbastanza facile da trasformare Coordinate X,Y, passati i parametri degli eventi OnDragOver e OnDragDrop, nelle coordinate del modulo.

Lavora con le proprietà Left e Top del componente su cui si posiziona il cursore. Farò un semplice esempio. Posizionare un componente Memo nel form e impostarne la proprietà Align su alTop. Posiziona un pannello sul modulo, imposta anche la proprietà Allinea su alTop e imposta la proprietà Altezza su un valore piccolo, ad esempio 6 o 7 pixel. Imposta DragMode su dmAutomatica e DragCursor su crVSplit. Posiziona un altro componente Memo e imposta Allinea su alClient. Seleziona entrambi i promemoria contemporaneamente, il pannello e crea un gestore di eventi OnDragOver comune come mostrato di seguito:

Trascina e rilascia HTML le interfacce consentono alle applicazioni di utilizzare le funzioni 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 quali elementi 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.

identificare ciò che è trascinabile

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

Questo elemento è trascinabile.

Per ulteriori informazioni, vedere:

gestire la goccia effetto

Il gestore dell'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 gli elementi di trascinamento e quindi elaborarli di conseguenza. Inoltre, la semantica dell'applicazione può variare a seconda del valore di

Uso della tecnologia trascinare e rilasciare (trascinare e rilasciare) consente all'utente di spostare vari oggetti da uno all'altro, ad esempio elementi di un elenco all'altro. Per fare ciò, è necessario utilizzare due controlli: un sink e una sorgente. Il ricevitore è l'oggetto che riceverà l'oggetto sorgente (oggetto mobile).

Gli eventi che si verificano durante il movimento degli oggetti sono elencati di seguito nell'ordine in cui si verificano.

OnStartTrascina(digitare TStartDragEvent) - generato dall'oggetto di origine all'inizio dell'operazione. Parametri passati al gestore eventi: oggetto ricevitore DragObject (tipo TDragObject), oggetto sorgente (tipo TObject).

OnDragOver(digitare TDragOverEvent) - crea un oggetto di destinazione quando un oggetto mobile viene posizionato sopra di esso. Parametri passati al gestore eventi: Oggetto mittente mittente (tipo TObject), Oggetto sorgente sorgente (tipo TObject), Stato movimento stato (tipo TDragState), X e Y (tipo intero) - coordinate correnti del puntatore del mouse, Accept (tipo booleano ) segno di conferma dell'operazione di trasloco. Lo stato di movimento rende chiaro se l'oggetto in movimento si trova nell'area del ricevitore, se si muove in essa, se l'ha lasciato. I parametri passati consentono all'oggetto ricevente di accettare o rifiutare l'oggetto di origine. Il parametro Accept è impostato su Trye se l'operazione di spostamento viene accettata, su False in caso contrario.

onDragDrop (tipo TDragDropEvent) - Generato dall'oggetto di destinazione quando l'oggetto trascinato viene rilasciato su di esso. Al gestore dell'evento vengono passate le coordinate correnti del puntatore del mouse, l'oggetto ricevitore Sender (tipo TObject) e l'oggetto movimento Source originale (tipo TObject).

onEndDrag (tipo EndDragEvent) - Generato al termine di un'operazione di trascinamento. Le coordinate X e Y del punto in cui l'oggetto sorgente Sender e l'oggetto destinatario Destinazione vengono passati al gestore eventi.

Per creare un drag and drop è sufficiente implementare due eventi: OnDragDrop e OnDragOver con la proprietà DragMode impostata su dmAutomatic. In caso contrario, l'inizio dell'operazione di spostamento, il metodo BeginDrag, deve essere codificato dal programmatore.

Per consolidare il materiale, creeremo la seguente applicazione. Posizionare un componente Pannello nel modulo. Imposta la proprietà DragMode di Controllo oggetti su dmAutomatic. Seleziona l'oggetto modulo e utilizza la finestra di ispezione Oggetti per creare i seguenti eventi:

Procedura TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); inizia se Sorgente = Pannello1 quindi Accetta:= Vero altrimenti Accetta:= Falso; fine; procedura TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); beginPanel1.Left:=X; Pannello1.Alto:=Y; fine;

Ora, eseguendo l'applicazione e premendo il pulsante del mouse sul pannello, possiamo spostare l'oggetto pannello in tutto il modulo.

Conclusione: abbiamo conosciuto la tecnologia trascinare e rilasciare(trascina e rilascia) e l'ho usato in pratica.