Trascina e rilascia eventi. Domande generali e teoria della tecnologia Drag and Drop. Trascina limite di trascinamento per trascinamento della selezione

Borland ha implementato la propria versione dell'interfaccia Drag & Drop per la libreria VCL (tradotta come "drag and drop"). Questa interfaccia interna - è possibile inviare e ricevere qualsiasi controllo Delphi all'interno del modulo (ad eccezione del modulo stesso). È implementato senza utilizzare le funzioni corrispondenti dell'API di Windows - devono essere utilizzati quando si organizza la comunicazione con altre attività trascinandole.

Facendo clic con il pulsante sinistro del mouse sul controllo, possiamo "trascinarlo" su qualsiasi altro elemento. Dal punto di vista del programmatore, ciò significa che al momento del trascinamento e rilascio della chiave, vengono generati alcuni eventi che trasmettono tutte le informazioni necessarie: un puntatore all'oggetto che viene trascinato, le coordinate correnti del cursore, ecc. Il ricevitore degli eventi è l'elemento su cui si trova attualmente il cursore. Il gestore di tale evento dovrebbe informare il sistema se il controllo dato accetta o meno il "pacchetto". Quando si rilascia il pulsante sopra l'elemento di controllo di ricezione, vengono generati uno o due altri eventi, a seconda della disponibilità del ricevitore.

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

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

La funzione restituisce un oggetto della classe baseTControl a cui appartiene la posizione dello schermo con le coordinate definite dal parametro Pos. Questa funzione viene utilizzata per determinare il potenziale destinatario di un'operazione di trascinamento della selezione o di trascinamento della selezione. Se non esistono controlli con finestre per la posizione specificata, la funzione ritornazero . Il parametro AllowDisabled determina se gli oggetti bloccati verranno presi in considerazione.

Funzione IsDragObject (Sender: TObject): Boolean;

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

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

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

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

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

L'interfaccia per il trasferimento e la ricezione di componenti è apparsa molto tempo fa. Fornisce l'interazione di due controlli in fase di esecuzione. In questo caso, è possibile eseguire tutte le operazioni necessarie. Nonostante la semplicità di implementazione e l'età dello sviluppo, molti programmatori (soprattutto i principianti) considerano questo meccanismo oscuro ed esotico. Tuttavia, l'utilizzo del trascinamento della selezione può essere molto utile e facile da implementare. Ora vedremo questo.

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

Credetemi, basta convertire le coordinate X, Y passate nei parametri dell'evento OnDragOver e OnDragDrop nelle coordinate del modulo.

Utilizzare le proprietà Sinistra e Superiore del componente su cui si sposta il cursore. Farò un semplice esempio. Posizionare il componente Memo sul modulo e impostare la proprietà Align su alTop. Posiziona un pannello sul modulo, imposta anche la proprietà Allinea su alTop e imposta un valore piccolo per la proprietà Height, diciamo 6 o 7 pixel. Installa DragMode su dmAutomatica e DragCursor su crVSplit. Posizionare un altro componente Memo e impostare Allinea su alClient. Seleziona contemporaneamente entrambi i componenti Memo, il pannello e crea un gestore eventi OnDragOver comune come mostrato di seguito:

Di recente, ho avuto l'idea di iniziare a sviluppare un gioco per Android. Per cominciare, ho deciso di scrivere scacchi. Ho pensato alla tecnologia Trascina e rilascia   Perfetto per implementare il meccanismo per lo spostamento di forme. Per i non iniziati, lo noto il metodo di trascinamento della selezione consiste   nella possibilità di trascinare alcuni oggetti grafici su altri ed eseguire una determinata azione dopo il rilascio. L'esempio più semplice è rimuovere un collegamento dal desktop del PC trascinandolo nel cestino. Avendo gettato una scorciatoia nel cestino, diciamo al sistema che vogliamo forzare l'interazione di questi due oggetti. Il sistema riceve il nostro segnale e decide quale azione deve intraprendere. Il trascinamento della selezione è molto diffuso grazie alla sua chiarezza intuitiva. Questo approccio è supportato dalla nostra esperienza di interazione con oggetti del mondo reale e funziona alla grande in un ambiente virtuale. Per quanto riguarda gli scacchi, usando il drag and drop è tecnologicamente più semplice determinare la cella in cui l'utente ha trascinato il pezzo, poiché non è necessario calcolare il numero di cella dalle coordinate del punto di rilascio. Questo lavoro sarà svolto dalla macchina virtuale.

Obiettivi per l'utilizzo della tecnologia Drag n Drop

L'uso della tecnologia di trascinamento della selezione mi consente di risolvere tre problemi con poco sangue:

1. Visualizzazione del corso. Quando l'utente tocca la figura e inizia a spostarla sullo schermo, la figura viene sostituita da un'immagine più piccola. Pertanto, l'utente comprende che la figura viene catturata.
2. Ho limitato l'area di movimento della figura alle dimensioni della tavola.
3. Se l'utente ha rilasciato la figura nel posto sbagliato, dovrebbe tornare alla sua posizione originale.

Le attività sono delineate, procederemo alla loro attuazione.

ImageView spoofing al tocco

Tutte le mie forme sono oggetti ImageView. Sfortunatamente, si è scoperto che l'implementazione di Drag & Drop in Android non consente "out of the box" di effettuare la sostituzione dell'immagine dell'oggetto quando viene toccato. Tuttavia, questo compito è completamente risolto tramite API. Dovremo eseguire una serie di semplici passaggi:

1. Crea un oggetto DragShadowBuilder.
2. Chiamare il metodo startDrag.
3. Nascondi il nostro ImageView, che visualizza la forma chiamando il metodo setVisibility con il parametro View.INVISIBLE. Di conseguenza, solo l'oggetto DragShadowBuilder rimarrà sullo schermo, il che sarà un segnale per l'utente sulla cattura della figura.

Questi passaggi devono essere implementati in OnTouchListner di ImageView. Per fare ciò, ridefinire il metodo onTouch:

  @ Override booleano pubblico onTouch (Visualizza vista, MotionEvent motionEvent) (if (motionEvent. GetAction () \u003d\u003d MotionEvent. ACTION_DOWN) (ClipData clipData \u003d ClipData. NewPlainText ("", ""); Visualizza. DragShadowBuilder dsb \u003d nuova vista. DragShadowBuilder dsb \u003d nuova vista. (view); view. startDrag (clipData, dsb, view, 0); view. setVisibility (View. INVISIBLE); return true;) else (return false;))

È tutto molto semplice. Quindi, con la sostituzione dell'immagine capita, passiamo al prossimo compito.

Trascina limite di trascinamento per trascinamento della selezione

La limitazione dell'area di trascinamento è associata a un problema. Il fatto è che se rilasci il pezzo fuori dal tabellone, l'evento di rilascio non accadrà, perché l'utente ha rilasciato l'oggetto da zero e l'oggetto non ha nulla con cui interagire. Di conseguenza, la figura non tornerà al suo stato originale e rimarrà nascosta per sempre. Ho perso molto tempo per leggere la documentazione, ma non riuscivo ancora a trovare un modo per limitare l'area di trascinamento della selezione degli oggetti. L'illuminazione arrivò all'improvviso. Non devo limitare affatto l'area, devo scoprire se l'utente ha rilasciato correttamente la cifra o meno.

Determinazione del rilascio corretto
Ho trovato le risposte alle mie domande nella sezione "Gestione degli eventi di trascinamento" sul sito Web degli sviluppatori Android. Ecco alcuni punti chiave:

1. Quando l'utente completa il trascinamento della selezione nel gestore DragListeners, viene generato l'evento ACTION_DRAG_ENDED.
2. In DragListener, è possibile ottenere informazioni più dettagliate sull'operazione di trascinamento chiamando il metodo DragEvent.getResult ().
3. Se DragListener restituisce true in risposta all'evento ACTION_DROP, anche una chiamata a getResult restituirà true, altrimenti false.

Pertanto, devo intercettare l'evento ACTION_DRAG_ENDED e chiamare il metodo getResult. Se restituisce falso, l'utente ha trascinato il pezzo fuori dalla scacchiera e devo mettere ImageView in modalità visibile.

  @ Sostituisci booleano pubblico onDrag (Visualizza vista, DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction (); Visualizza dragView \u003d (View) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (contieneDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (IncludesDragable \u003d true;) altrimenti if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (Visualizza. VISIBLE);)) if if (dragAction \u003d \u003d DragEvent. ACTION_DROP & amp; & amp; IncludesDragable) (checkForValidMove ((ChessBoardSquareLayoutView) view, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) private booleano dropEventNotHandled (DragEvent dragEvent) (get! Drag ))

Ora l'utente può lasciare andare la figura ovunque e non accadrà nulla di brutto.

Determinazione delle mosse consentite

L'ultima parte dell'articolo è dedicata alla verifica della validità della mossa che l'utente sta tentando di effettuare. Prima di discutere in dettaglio questo argomento, farò una piccola osservazione che spiega la struttura della mia applicazione. Una scacchiera è rappresentata come TableLayout e ogni cella è un discendente di LinearLayout e ha un OnDragListener.

Inoltre, ogni OnDragListener fa riferimento a un oggetto mediatore che si occupa dell'interazione degli oggetti di gioco e ricorda la posizione della cella corrente.

Quando un utente trascina una figura su una cella, sono possibili le seguenti azioni:

1. Utilizza l'evento ACTION_DRAG_ENTERED per impostare la variabile "IncludesDraggable" su true.
2. Utilizza l'evento ACTION_DRAG_EXITED per impostare la variabile "IncludesDraggable" su false.
3. Utilizzo dell'evento ACTION_DROP per richiedere al broker la validità dell'installazione di una figura in questa cella.

Di seguito è riportato il codice che implementa la logica descritta

@ Sostituisci booleano pubblico onDrag (Visualizza vista, DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction (); Visualizza dragView \u003d (View) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (contieneDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (IncludesDragable \u003d true;) altrimenti if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (Visualizza. VISIBLE);)) if if (dragAction \u003d \u003d DragEvent. ACTION_DROP & amp; & amp; IncludesDragable) (checkForValidMove ((ChessBoardSquareLayoutView) view, dragView); dragView. SetVisibility (View. VISIBLE);) return true;)

Come puoi vedere, indipendentemente dal fatto che lo spostamento sia valido o meno, ImageView viene messo in uno stato visibile. Volevo che l'utente vedesse come si muove la figura. Ho menzionato in precedenza che una cella è un discendente di LayoutView. Questo per rendere ImageView più semplice da spostare da cella a cella. Di seguito è riportato il codice per il metodo checkForValidMove, che mostra come si sposta ImageView.

  private void checkForValidMove (ChessBoardSquareLayoutView view, View dragView) (if (mediator. isValidMove (view)) (ViewGroup owner \u003d (ViewGroup) dragView. getParent (); proprietario. removeView (dragView); view. addView (dragView); view. setGravity (Gravity. CENTRE); view. ShowAsLanded (); mediator. HandleMove (view);))

Spero che questo articolo ti aiuti a sviluppare i tuoi progetti.

Per molto tempo ci sono funzioni JavaScript che ci consentono di creare interfacce drag & drop. Ma nessuna di queste implementazioni è nativa per il browser. HTML5 ha il suo metodo per creare interfacce drag & drop (con un piccolo aiuto da JavaScript). In questo articolo, ti diremo come ottenere questo ...

Supporto per il browser

Il trascinamento della selezione HTML5 è attualmente supportato da tutti i principali browser desktop (incluso IE (anche il supporto parziale è disponibile in IE 5.5)), ma non è supportato da nessuno dei browser mobili più diffusi.

Trascina e rilascia eventi

In ogni fase del trascinamento della selezione, vengono attivati \u200b\u200bvari eventi in modo che il browser sappia quale codice JavaScript deve essere eseguito. Elenco degli eventi:

• dragStart: inizia quando l'utente inizia a trascinare gli elementi;
• dragEnter: attivato quando l'elemento trascinato viene trascinato per la prima volta sull'elemento di destinazione;
• dragOver: attivato quando il mouse viene spostato su un elemento quando si verifica un trascinamento;
• dragLeave: attivato se il cursore dell'utente lascia l'elemento durante il trascinamento;
• trascina: entra in azione ogni volta che muoviamo il mouse mentre trasciniamo il nostro elemento;
• drop: attivato quando viene eseguito il drop effettivo;
• dragEnd: attivato quando l'utente rilascia il pulsante del mouse durante il trascinamento di un oggetto.

Con tutti questi listener di eventi, hai un buon controllo su come funzionerà l'interfaccia.

Oggetto DataTransfer

Qui è dove accade tutta la magia del drag & drop. Questo oggetto contiene dati inviati dall'operazione di trascinamento. I dati possono essere stabiliti e ottenuti in vari modi, i più importanti dei quali sono:

• dataTransfer.effectAllowed \u003d value: restituisce tipi di azioni consentiti, valori possibili: none, copy, copyLink, copyMove, link, linkMove, move, all e non inizializzati.
• dataTransfer.setData (formato, dati): aggiunge dati e formati specifici.
• dataTransfer.clearData (formato): cancella tutti i dati per un formato specifico.
• dataTransfer.setDragImage (element, x, y): imposta l'immagine che si desidera trascinare, i valori xey indicano la posizione del cursore del mouse (0, 0 la posizionerà in alto a sinistra).
• data \u003d dataTransfer.getData (formato): come suggerisce il nome, restituisce i dati per un formato specifico.

Creazione di un esempio di trascinamento della selezione

Ora inizieremo a creare un semplice esempio di trascinamento della selezione. Come puoi vedere, abbiamo due div piccoli e uno grande, possiamo trascinare piccoli div in quello grande e persino spostarli indietro.

Trascina l'oggetto

La prima cosa che dobbiamo fare è creare HTML. Rendiamo i div trascinabili usando l'attributo trascinabile:

Al termine, dobbiamo definire una funzione JavaScript che funzionerà non appena inizieremo a spostare questo elemento:

Funzione dragStart (ev) (ev.dataTransfer.effectAllowed \u003d "move"; ev.dataTransfer.setData ("Text", ev.target.getAttribute ("id")); ev.dataTransfer.setDragImage (ev.target, 100,100) ; return true;)

In questo codice, dichiariamo innanzitutto quale tipo di effetto consentiamo nell'operazione e impostiamo lo spostamento. Nella seconda riga, impostiamo i dati per il lavoro, in cui il testo sarà Testo e il valore sarà l'ID dell'elemento che stiamo trascinando. Successivamente, usiamo il metodo setDragImage, che determina che trascineremo e quindi dove sarà il cursore durante il trascinamento, e poiché i cubi sono 200 per 200 pixel, lo abbiamo posizionato al centro. Alla fine, restituiamo il ritorno vero.

Rilascia oggetto

Affinché un elemento accetti il \u200b\u200brilascio, deve ascoltare 3 eventi diversi: dragEnter, dragOver, nonché eventi drop. Quindi aggiungiamo questo al nostro HTML5 in un div con un grande ID:

Funzione dragEnter (ev) (ev.preventDefault (); return true;) funzione dragOver (ev) (ev.preventDefault ();)

Nella prima funzione, determiniamo cosa dovrebbe accadere quando l'elemento che stiamo trascinando raggiunge l'elemento desiderato, dove dovrebbe avvenire la caduta, in questo caso impediamo solo il comportamento predefinito del browser. Successivamente, nella funzione dragOver, semplicemente non consentiamo il drop predefinito.

Nella parte successiva, definiamo la funzione per quando l'elemento verrà "lanciato" sul bersaglio desiderato:

Funzione dragDrop (ev) (var data \u003d ev.dataTransfer.getData ("Testo"); ev.target.appendChild (document.getElementById (data)); ev.stopPropagation (); return false;)

In quest'ultima parte, impostiamo innanzitutto la variabile data, in cui otteniamo tutti i dati disponibili per il formato di testo, quindi aggiungiamo i dati al div in cui è necessario "rilasciare" l'elemento.

Rendi la sezione di rilascio un obiettivo

La demo mostra che due div possono essere spostati al loro posto. Fortunatamente, aggiungere un altro target di rilascio è molto più semplice di quanto si pensi. Perché abbiamo già queste funzioni e tutto ciò che dobbiamo fare è aggiungere listener di eventi:

E questo è tutto ciò che serve per consentire il trascinamento di un div nella posizione originale.

Esistono molte applicazioni di trascinamento della selezione create utilizzando le librerie JavaScript e che sono spesso più facili da usare. Ma speriamo che in questa tecnica HTML5 e JavaScript, vedrai il potenziale futuro per risolvere i tuoi problemi.

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

Per siti Web, estensioni e applicazioni XUL, è possibile personalizzare quali elementi possono diventare trascinabili, il tipo di feedback il trascinabili   gli elementi producono e il droppable   elementi.

Questa panoramica di 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

evento	Gestore di eventi	Incendi quando ...
trascinare	ondrag	... a oggetto trascinato   (selezione dell'elemento o del testo) viene trascinato.
dragend	ondragend	... termina un'operazione di trascinamento (come rilasciare un pulsante del mouse o premere il tasto Esc; vedere Finendo un tiro.)
DragEnter	OnDragEnter	... un oggetto trascinato entra in una destinazione di rilascio valida. (See Specifica dei target di rilascio.)
dragexit	ondragexit	... un elemento non è più il bersaglio di selezione immediata dell'operazione di trascinamento.
DragLeave	ondragleave	... un oggetto trascinato lascia un target di rilascio valido.
DragOver	OnDragOver	... un oggetto trascinato viene trascinato su una destinazione di rilascio valida, ogni poche centinaia di millisecondi.
dragstart	ondragstart	... l'utente inizia a trascinare un elemento. (See Avvio di un'operazione di trascinamento.)
cadere	OnDrop	... un oggetto viene rilasciato su una destinazione di rilascio valida. (See Esecuzione di una caduta.)

nota:   Né gli eventi dragstart né dragend vengono attivati \u200b\u200bquando 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 ciò che è trascinabili

Fare un elemento trascinabili   richiede l'aggiunta di trascinabili   attributo e il ondragstart   gestore di eventi globali, come mostrato nell'esempio di codice seguente:

Questo elemento è trascinabile.

Per ulteriori informazioni, consultare:

Gestisci la goccia effetto

Il gestore per il cadere   L'evento è gratuito per elaborare i dati di trascinamento in un modo specifico dell'applicazione.

In genere, un'applicazione utilizza il getData ()   metodo per recuperare elementi trascinati e quindi elaborarli di conseguenza. Inoltre, la semantica dell'applicazione può differire in base al valore di