Creazione di una semplice interfaccia HTML5 “drag & drop”. Drag and drop: un modo per utilizzare gli elementi dell'interfaccia utente 13 tecnologia drag and drop

182

In questo esempio, selezioniamo un elemento div e lo rendiamo mobile chiamando su di esso il metodo draggable(). Come mostrato nella figura seguente, nel documento aperto l'elemento assume la sua posizione abituale, ma successivamente può essere spostato utilizzando il puntatore del mouse in qualsiasi punto della finestra del browser:

La possibilità di trascinare e rilasciare gli elementi è utile di per sé, ma lo è ancora di più se utilizzata insieme all'interazione Droppable, descritta di seguito.

L'interazione trascinabile viene ottenuta esclusivamente attraverso l'uso di markup HTML e stili CSS specifici. Ciò significa che questa funzionalità funzionerà in quasi tutti i browser, ma gli elementi che ne sono dotati non saranno in grado di funzionare con strumenti drag-and-drop nativi simili sistemi operativi.

Le operazioni di trascinamento definite dalle specifiche HTML5 vengono in genere implementate utilizzando meccanismi nativi del sistema operativo. Se stai utilizzando il meccanismo di trascinamento della selezione dell'interfaccia utente jQuery, è meglio disabilitare le funzionalità HTML5 equivalenti per evitare conflitti. Per fare ciò, imposta l'attributo trascinabile dell'elemento body del documento su false.

Impostazione dell'interazione Trascinabile

Sono disponibili molte opzioni di personalizzazione per le interazioni trascinabili. Le proprietà più importanti, discusse nelle sezioni seguenti, sono mostrate nella tabella seguente:

Proprietà di interazione trascinabili Descrizione della proprietà

asse	Limita la capacità di muoversi in determinate direzioni. Il valore predefinito è false, ovvero nessun vincolo, ma puoi anche specificare un valore "x" (spostamento solo lungo l'asse X) o "y" (spostamento solo lungo l'asse Y)
contenimento	Limita la posizione dell'elemento da spostare in un'area specifica dello schermo. I tipi di valori supportati sono descritti nella tabella seguente, utilizzando l'esempio corrispondente. Il valore predefinito è false, il che significa nessuna restrizione
ritardo	Specifica per quanto tempo un elemento deve essere trascinato prima di essere spostato. Il valore predefinito è 0, che significa nessun ritardo
distanza	Definisce la distanza entro la quale l'utente deve trascinare un elemento dalla sua posizione iniziale prima che si sposti effettivamente. Il valore predefinito è 1 pixel
griglia	Forza l'aggancio dell'elemento spostato alle celle della griglia. Il valore predefinito è false, il che significa nessun legame

Limitare le direzioni di movimento

Esistono diversi modi per limitare il movimento di un elemento a determinate direzioni. Il primo consiste nell'utilizzare l'opzione asse, che consente di limitare la direzione del movimento all'asse X o Y. Di seguito è mostrato un esempio:

... div.dragElement (dimensione carattere: grande; bordo: nero sottile e solido; imbottitura: 16px; larghezza: 8em; allineamento testo: centro; colore sfondo: grigio chiaro; margine: 4px ) $(funzione() ( $ ("".dragElement").draggable(( asse: "x")).filter("#dragV").draggable("opzione", "asse", "y"); )); Trascina verticalmente Trascina orizzontalmente Esegui esempio

In questo esempio definiamo due elementi div, li selezioniamo utilizzando jQuery e chiamiamo il metodo draggable(). Come argomento di questo metodo, passiamo un oggetto che inizialmente limita il movimento di entrambi gli elementi div alla direzione lungo l'asse X. Utilizzando quindi il metodo jQuery filter(), siamo in grado di selezionare l'elemento dragV senza che jQuery effettui la ricerca nuovamente l'intero documento e impostarlo su una diversa direzione di movimento consentita, lungo l'asse Y. Pertanto, otteniamo un documento in cui un elemento div può essere trascinato solo nella direzione verticale e l'altro solo nella direzione orizzontale. Il risultato è mostrato in figura:

Limitazione dell'area consentita di movimento degli elementi

Puoi anche limitare l'area dello schermo in cui puoi trascinare un elemento. Per fare ciò, utilizzare l'opzione di contenimento. I formati dei valori che possono essere specificati in questa opzione sono descritti nella tabella seguente:

Di seguito è riportato un esempio di utilizzo dell'opzione di contenimento:

... div.dragElement (dimensione carattere: grande; bordo: nero sottile e solido; imbottitura: 16px; larghezza: 8em; allineamento testo: centro; colore sfondo: grigio chiaro; margine: 4px) #container (bordo: doppio medio nero; larghezza: 700px; altezza: 450px) $(funzione() ( $(".dragElement").draggable(( contenimento: "parent" )).filter("#dragH").draggable("opzione", " asse", "x"); )); Trascina orizzontalmente Trascina all'interno del genitore Esegui esempio

In questo esempio, entrambi gli elementi hanno una capacità di movimento limitata e possono essere trascinati solo all'interno dell'elemento principale, che è un div di dimensione fissa. Uno dei div flottati ha il vincolo aggiuntivo di essere flottato utilizzando l'opzione axis in quanto può spostarsi solo orizzontalmente all'interno del suo genitore. Il risultato è illustrato in figura:

Limitare la possibilità di spostare un elemento nelle celle della griglia

L'opzione griglia consente di impostare il legame dell'elemento spostato alle celle della griglia. Questa opzione prende come valore un array di due elementi che specificano la larghezza e l'altezza delle celle della griglia in pixel. Di seguito è riportato un esempio di utilizzo dell'opzione griglia:

... #draggable (dimensione carattere: x-large; bordo: nero sottile e solido; larghezza: 5em; allineamento testo: centro; imbottitura: 10px) $(funzione() ( $("#draggable").draggable( ( griglia: )); )); Trascinami Esegui esempio

Questo esempio specifica una griglia con celle larghe 100 pixel e alte 50 pixel. Quando trascini un elemento, questo "salta" da una cella (invisibile) all'altra. L'effetto di aggancio è un ottimo esempio di come è possibile utilizzare la funzionalità di interazione, ma è difficile da trasmettere utilizzando gli screenshot.

Puoi creare un effetto di aggancio per una sola direzione impostando l'asse di movimento libero su 1. Ad esempio, se imposti l'opzione della griglia su , l'elemento si aggancerà alle celle della griglia larghe 100 pixel quando viene spostato orizzontalmente, ma si sposterà liberamente verticalmente.

Ritardo di spostamento

Sono disponibili due opzioni che consentono di ritardare il trascinamento di un elemento in movimento. L'opzione ritardo consente di specificare la quantità di tempo, in millisecondi, durante la quale l'utente deve trascinare il puntatore del mouse prima che l'elemento venga effettivamente spostato. Un altro tipo di ritardo è fornito dall'opzione distance, che specifica la distanza in pixel alla quale l'utente deve trascinare il puntatore del mouse prima che venga seguito da un elemento.

Di seguito è riportato un esempio di utilizzo di entrambe le impostazioni:

... #time, #distance (dimensione carattere: grande; bordo: nero sottile e solido; imbottitura: 10px; larghezza: 120px; allineamento testo: centro; colore sfondo: grigio chiaro; margine: 4px; ) $(funzione( ) ( $("#tempo").draggable(( ritardo: 1000 )) $("#distanza").draggable(( distanza: 150 )) )); Blocco con ritardo Blocco con distanza minima Esempio di corsa

In questo esempio ci sono due elementi mobili, uno dei quali viene ritardato utilizzando l'opzione ritardo, mentre l'altro viene ritardato utilizzando l'opzione distanza.

Nel caso di un ritardo, specificato dall'opzione ritardo, l'utente deve trascinare per un periodo di tempo specificato prima di spostare effettivamente l'elemento. In questo esempio, la durata di questo periodo è 1000 ms. Non è necessario muovere il mouse in questo momento, ma per tutto il tempo di ritardo il pulsante del mouse deve rimanere premuto, dopodiché l'elemento può essere spostato spostando il mouse. Una volta trascorso il tempo di ritardo, l'elemento spostato si aggancerà alla posizione del puntatore del mouse, in base ai vincoli imposti dalle opzioni griglia, regione e asse discusse in precedenza.

L'opzione distanza ha un effetto simile, ma in questo caso l'utente deve trascinare il puntatore del mouse per almeno un numero specificato di pixel in qualsiasi direzione dalla posizione iniziale dell'elemento. L'elemento spostato passerà quindi alla posizione corrente del puntatore.

Se applichi entrambe le impostazioni allo stesso elemento, l'elemento spostato non si sposterà finché non saranno soddisfatti entrambi i criteri di ritardo, ad es. finché un tentativo di trascinare un elemento dura per un periodo di tempo specificato e finché il puntatore del mouse non si sposta di un numero di pixel specificato.

Utilizzo dei metodi di interazione trascinabili

Tutti i metodi definiti per l'interazione Trascinabile fanno parte dell'insieme di metodi di base che hai già visto guardando i widget. Non esistono metodi specifici per l'interazione trascinabile, quindi non li tratteremo in dettaglio. L'elenco dei metodi disponibili è riportato nella tabella seguente:

Utilizzo di eventi di interazione trascinabili

Interaction Draggable supporta un semplice set di eventi che avvisano quando un elemento viene trascinato. Questi eventi sono descritti nella tabella seguente:

Come per gli eventi del widget, anche a questi eventi è possibile rispondere. Di seguito è riportato un esempio di gestione degli eventi di avvio e arresto:

... #draggable (dimensione carattere: x-large; bordo: nero sottile e solido; larghezza: 190px; allineamento testo: centro; imbottitura:10px) $(funzione() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Trascinami..."), stop: function() ( $("#draggable").text("Trascinami") ) )) ;)); Trascinami Esegui esempio

In questo esempio vengono utilizzati gli eventi start e stop per modificare il contenuto testuale di un elemento mentre viene trascinato. Questo vantaggio è dovuto al fatto che l'interazione di Draggable è implementata interamente utilizzando HTML e CSS: puoi utilizzare jQuery per modificare lo stato di un elemento trascinabile anche mentre si sposta sullo schermo.

Utilizzo dell'interazione rilasciabile

Trascinare un elemento da solo può essere sufficiente in alcune situazioni, ma è molto utile se utilizzato insieme all'interazione Droppable.

Gli elementi a cui è stata applicata l'interazione Trascinabile (elementi riceventi) acquisiscono la capacità di accettare elementi mobili creati utilizzando l'interazione Trascinabile.

Gli elementi riceventi vengono creati utilizzando il metodo droppable(), ma per ottenere funzionalità utili sarà necessario creare gestori di eventi tra quelli definiti per questo tipo di interazione. Gli eventi disponibili sono mostrati nella tabella seguente:

Eventi di interazione rilasciabili descrizione dell'evento

creare	Si verifica quando un'interazione Droppable viene applicata a un elemento
attivare	Si verifica quando l'utente inizia a trascinare l'elemento da spostare
disattivare	Si verifica quando l'utente smette di trascinare l'elemento da spostare
Sopra	Si verifica quando l'utente trascina un elemento mobile su un elemento ricevente (a condizione che il pulsante del mouse non sia stato ancora rilasciato)
fuori	Si verifica quando l'utente trascina l'elemento da spostare all'esterno dell'elemento ricevente
gocciolare	Si verifica quando l'utente lascia l'elemento in fase di spostamento sull'elemento ricevente

Di seguito è riportato un esempio di creazione di un semplice elemento di ricezione per il quale è definito un singolo gestore di eventi di rilascio:

... #draggable, #droppable (dimensione carattere: grande; bordo: nero sottile e solido; imbottitura: 10px; larghezza: 100px; allineamento testo: centro; colore sfondo: grigio chiaro; margine: 4px;) #droppable (imbottitura : 20px; posizione: assoluta; destra: 5px;) $(funzione() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: funzione() ( $(" #trascinabile").text("Sinistra") ) )); )); Lasciami qui Esempio di drag me run

Questo esempio aggiunge un elemento div al documento il cui contenuto testuale è rappresentato dalla stringa "Lascia qui". Selezioniamo questo elemento utilizzando jQuery e chiamiamo il metodo droppable(), passandogli un oggetto settings che definisce un gestore per l'evento drop. La risposta a questo evento è modificare il testo dell'elemento da spostare utilizzando il metodo text().

L'interazione di trascinamento creata in questo esempio è semplice, ma fornisce un contesto utile per spiegare come funzionano insieme le interazioni trascinabile e rilasciabile. Le varie fasi del processo di trascinamento degli elementi sono illustrate in figura:

Sembra tutto molto semplice. Trasciniamo l'elemento da spostare finché non si trova sopra l'elemento ricevente e lo rilasciamo. L'elemento rilasciato rimane dove era stato lasciato e il suo contenuto testuale cambia in risposta all'evento di rilascio. Le sezioni seguenti mostrano come utilizzare altri eventi di interazione Droppable per migliorare l'esperienza utente.

Illuminazione dell'oggetto ricevente target

Utilizzando gli eventi di attivazione e disattivazione, è possibile evidenziare l'oggetto ricevente di destinazione quando l'utente inizia il processo di trascinamento di un elemento. In molte situazioni, questa idea è molto fruttuosa perché fornisce all'utente una guida affidabile su quali elementi fanno parte del modello drag-and-drop. Un esempio corrispondente è riportato di seguito:

... $(funzione() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: funzione() ( $("#draggable").text("Sinistra ") ), attiva: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), disattiva: function() ( $("#droppable ").css("bordo", "").css("colore-sfondo", ""); ) )); )); ...Esegui l'esempio

Non appena l'utente inizia a trascinare un elemento, viene attivato l'evento activate associato al nostro elemento ricevente e la funzione del gestore utilizza il metodo css() per modificare le proprietà CSS del bordo e del colore di sfondo di quell'elemento. Di conseguenza, l'elemento ricevente di destinazione viene evidenziato, indicando all'utente che esiste una connessione tra esso e l'elemento da spostare.

L'evento deactivate viene utilizzato per rimuovere i valori delle proprietà CSS dall'elemento ricevente e riportarlo al suo stato originale non appena l'utente rilascia il pulsante del mouse. (Questo evento si verifica ogni volta che il trascinamento di un elemento si interrompe, indipendentemente dal fatto che l'elemento trascinato venga lasciato o meno sull'elemento ricevente.) Questo processo è illustrato nella figura:

Gestione degli elementi sovrapposti

La tecnologia drag-and-drop può essere migliorata aggiungendo più volte la gestione degli eventi. L'evento over si verifica quando il 50% dell'elemento spostato si trova sopra qualsiasi parte dell'elemento ricevente. L'evento out si verifica quando gli elementi precedentemente sovrapposti non si sovrappongono più. Di seguito è riportato un esempio della risposta a questi eventi:

$(funzione() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: funzione() ( $("#draggable").testo("Sinistra") ) , attiva: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), disattiva: function() ( $("#droppable"). css("border", "").css("color-sfondo", ""); ), over: function() ( $("#droppable").css(( border: "doppio rosso medio", backgroundColor : "rosso" )); ), out: funzione() ( $("#droppable").css("bordo", "").css("colore-sfondo", ""); ))); ) ); Esegui l'esempio

Qui vengono utilizzate le stesse funzioni di gestione dell'esempio precedente, ma in questo caso sono associate agli eventi over e out. Quando l'elemento ricevente si sovrappone per almeno il 50% all'elemento da spostare, viene racchiuso in una cornice e il suo colore di sfondo cambia, come mostrato in figura:

Questo limite del 50% è chiamato soglia di sovrapposizione (tolleranza), il cui valore può essere impostato in fase di creazione dell'elemento ricevente, come verrà mostrato in seguito.

Impostazione delle interazioni Droppable

L'interazione Droppable ha una serie di proprietà che puoi modificare per personalizzarne il comportamento. Queste proprietà sono elencate nella tabella seguente:

Proprietà di interazione rilasciabili Descrizione della proprietà

Disabilitato	Se questa opzione è vera, la funzionalità di interazione Droppable è inizialmente disabilitata. Il valore predefinito è falso
accettare	Restringe l'insieme di elementi mobili a cui risponderà l'elemento ricevente. Il valore predefinito è *, che corrisponde a qualsiasi elemento
activeClass	Definisce una classe che verrà assegnata in risposta all'evento di attivazione e rimossa in risposta all'evento di disattivazione
hoverClass	Definisce una classe che verrà assegnata in risposta a un evento over e rimossa in risposta a un evento out
tolleranza	Definisce il grado minimo di sovrapposizione al quale si verifica un evento eccessivo

Limitare gli elementi consentiti da spostare

Puoi limitare l'insieme di elementi rilasciabili che verranno accettati da un elemento con funzionalità di interoperabilità Droppable utilizzando l'opzione accetta. Il valore dell'opzione accetta dovrebbe essere impostato su un selettore. Di conseguenza, gli eventi di interazione Droppable si verificheranno solo se l'elemento da spostare corrisponde al selettore specificato. Un esempio corrispondente è riportato di seguito:

... .draggable, #droppable (dimensione carattere: grande; bordo: nero sottile e pieno; imbottitura: 10px; larghezza: 100px; allineamento testo: centro; colore sfondo: grigio chiaro; margine: 4px;) #droppable (imbottitura : 20px; posizione: assoluta; destra: 5px;) $(funzione() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: funzione(event, ui) ( ui.draggable.text("Left") ), attiva: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), disattiva: function () ( $("#droppable").css("bordo", "").css("colore-sfondo", ""); ), accetta: "#drag1" )); )); Lascia qui Elemento 1 Elemento 2 Esegui esempio

In questo esempio ci sono due elementi trascinabili con ID drag1 e drag2. Quando creiamo un elemento ricevente, utilizziamo l'opzione accetta, con la quale indichiamo che solo l'elemento drag1 sarà un elemento accettabile da spostare.

Quando trascini l'elemento drag1, vedrai lo stesso effetto degli esempi precedenti. Al momento opportuno, gli eventi di attivazione, disattivazione, over e out verranno attivati ​​per l'elemento ricevente. Allo stesso tempo, se trascini un elemento drag2 che non corrisponde al selettore specificato nel parametro accetta, questi eventi non verranno attivati. Questo elemento può essere spostato liberamente, ma non sarà percepito dall'elemento ricevente.

Notare il cambiamento nel modo in cui selezioniamo un elemento float accettabile su cui chiamare il metodo text(). Quando nel documento c'era un solo elemento in movimento, l'attributo id era sufficiente per questo:

Rilascia: funzione() ( $("#draggable").text("Sinistra") ),

In questo esempio ci sono due elementi da spostare e la selezione tramite l'attributo id non darà risultati risultato desiderato, poiché il testo in questo caso cambierà sempre nello stesso elemento flottato, indipendentemente da quale sia accettabile per l'elemento ricevente.

La soluzione è utilizzare l'oggetto ui, che jQuery UI fornisce come argomento aggiuntivo a ciascun gestore di eventi. La proprietà draggable di un oggetto ui restituisce un oggetto jQuery contenente l'elemento che l'utente trascina o tenta di rilasciare sull'elemento di destinazione, consentendo di selezionare l'elemento desiderato in questo modo:

Rilascia: funzione(evento, ui) ( ui.draggable.text("Sinistra")),

Modifica della soglia di sovrapposizione

Per impostazione predefinita, l'evento over si verifica solo quando almeno il 50% dell'elemento spostato si sovrappone all'elemento ricevente. L'entità di questa soglia di sovrapposizione può essere modificata utilizzando l'opzione tolleranza, che può assumere i valori riportati nella tabella seguente:

I due valori che utilizzo più spesso sono fit e touch perché hanno più senso per gli utenti. Utilizzo fit quando l'elemento trascinato deve rimanere nell'area dell'elemento ricevente in cui è stato spostato e touch quando l'elemento trascinato deve tornare nella sua posizione originale (un esempio verrà fornito di seguito). Di seguito è riportato un esempio di utilizzo dei parametri di adattamento e tocco:

Il valore clone indica all'interfaccia utente jQuery di creare una copia dell'elemento da spostare, insieme a tutto il suo contenuto, e di utilizzare il risultato risultante come elemento di supporto. Il risultato è mostrato in figura:

L'elemento helper viene rimosso quando l'utente rilascia il pulsante del mouse sull'elemento da spostare, lasciando l'elemento da spostare e l'elemento ricevente nelle loro posizioni originali.

Come mostrato in figura, l'elemento originale da spostare rimane al suo posto e solo l'elemento ausiliario si sposta sullo schermo seguendo il puntatore del mouse. Se la dimensione dell'elemento spostato è grande, come nel nostro esempio, allora copre il resto degli elementi del documento, per cui sarà difficile per l'utente anche solo tenere traccia della posizione dell'elemento ricevente. Questo problema può essere risolto fornendo la funzione come valore dell'opzione helper, come mostrato nell'esempio seguente:

... $(funzione() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Esegui l'esempio

Quando l'utente inizia a trascinare un elemento, jQuery UI chiama la funzione specificata dal parametro helper e utilizza l'elemento restituito come oggetto da trascinare. In questo caso, sto utilizzando jQuery per creare l'elemento img. Il risultato è mostrato in figura:

Una piccola immagine funge da proxy per l'elemento da spostare, rendendo molto più semplice tenere traccia degli altri elementi nel documento.

L'oggetto ui che l'interfaccia utente jQuery passa agli eventi di interazione Droppable contiene una proprietà helper e questa proprietà può essere utilizzata per manipolare l'helper mentre viene trascinato. Di seguito è riportato un esempio di utilizzo di questa proprietà insieme agli eventi over e out:

... $(funzione() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: funzione(evento, ui) ( ui.helper.css("border", "") ) )); )); ...

Qui gli eventi over e out e la proprietà ui.helper vengono utilizzati per visualizzare un bordo attorno all'elemento helper quando si sovrappone all'elemento ricevente. Il risultato è mostrato in figura:

Aggancia ai bordi dell'elemento

Utilizzando l'opzione snap è possibile fare in modo che l'elemento spostato venga “attratto” dai bordi degli elementi accanto ai quali passa. Questa opzione accetta un selettore come valore. L'elemento da spostare si aggancerà ai bordi di qualsiasi elemento corrispondente al selettore specificato. Di seguito è riportato un esempio di utilizzo dell'opzione Snap:

Esegui l'esempio dell'interfaccia utente jQuery #snapper, .draggable, .droppable (dimensione carattere: grande; bordo: nero medio pieno; imbottitura: 4px; larghezza: 150px; allineamento testo: centro; colore sfondo: grigio chiaro; margine inferiore: 10px ;).droppable (margine destro: 5px; altezza: 50px; larghezza: 120px) #dropContainer (posizione: assoluta; destra: 5px;) div span (posizione: relativa; superiore: 25%) .droppable.active (bordo: verde medio solido) .droppable.hover (colore di sfondo: verde chiaro) #snapper (posizione: assoluta; sinistra: 35%; bordo: nero medio pieno; larghezza: 180px; altezza: 50px) $(funzione() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "entrambi", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "passa il mouse" )); )); Carrello Scatta qui Trascinami

Quando un elemento in movimento si avvicina a uno degli elementi adatti, viene, per così dire, “attratto” da esso in modo tale che i loro bordi adiacenti si tocchino. Per tale associazione è possibile selezionare qualsiasi elemento, non solo l'elemento ricevente. In questo esempio, ho aggiunto un elemento div e ho impostato l'opzione di snap su un valore che seleziona quell'elemento così come l'elemento ricevente nel documento.

Sono disponibili un paio di opzioni di supporto che consentono di personalizzare in modo più preciso il comportamento di ancoraggio degli elementi. Uno di questi è l'opzione snapMode. Con il suo aiuto puoi specificare il tipo di rilegatura. Sono ammessi i seguenti valori: interno(si aggancia ai bordi interni degli elementi), esterno(aggancia ai bordi esterni degli elementi) e Entrambi(ancoraggio a tutti i bordi; impostazione predefinita).

L'opzione snapTolerance consente di specificare di quanto l'elemento flottato deve avvicinarsi al bordo dell'elemento di destinazione prima che si verifichi lo snap. Il valore predefinito è 20, che significa 20 pixel. L'esempio utilizza un valore pari a 50, che corrisponde a uno snap a una distanza maggiore. È molto importante scegliere il valore corretto per questa opzione. Se il valore snapTolerance è troppo basso, l'utente potrebbe non notare l'effetto di aggancio, mentre se è troppo alto, l'elemento spostato inizierà a fare salti inaspettati, agganciandosi a elementi distanti.

Le tecniche di trascinamento della selezione si sono evolute nel corso di molti anni. Non sorprende che, con il crescente numero di programmatori che sviluppano plugin open source codice sorgente(ad esempio, per jQuery) i vecchi metodi vengono nuovamente ripresi. La libreria JavaScript è altamente reattiva e offre molti miglioramenti in questa era della tecnologia web.

In questo tutorial creeremo uno script che potrai utilizzare per creare rettangoli drag and drop dinamici sul tuo sito web. Il processo è gestito da jQuery. Tali script fanno risparmiare tempo fornendo funzionalità già pronte! E la libreria drag-and-drop può essere utilizzata in altri progetti.

Preparazione dei contenuti

Prima di tutto, prepariamo un piccolo sito web per il progetto. Nella cartella del progetto è necessario creare due directory con i nomi notevoli "js" e "css" e file vuoto indice.html. Il codice sarà molto semplice, in modo che ci sia un'idea chiara del lavoro e ci sia spazio per ulteriori sviluppi.

Di seguito è riportato il codice per our FileHTML. Nel capitolo Testa includiamo 3 script. Lo script jQuery principale verrà caricato dal server Google Code. è incluso anche il nostro file di stile style.css, che contiene le principali proprietà per la formatura aspetto il nostro documento.

Trascinami Sì, sì. Proprio io. Puoi trascinare anche me ( zIndex: 200, opacità: .9 )

P.S.: puoi lasciarmi ovunque!

Sezione interna corpo vengono posizionati solo due blocchi div, che contengono entrambi i rettangoli. Il codice è abbastanza semplice e comprensibile. All'interno di ogni rettangolo ci sono intestazioni con le classi handler e handler2 . Questo è importante perché ogni rettangolo si comporta diversamente durante il trascinamento.

Installazione dei CSS

Il codice HTML è molto semplice. Se comprendi il markup di base, allora Stili CSS inoltre non presenterà alcuna difficoltà. Margini, imbottiture e colori principalmente definiti.

Corpo,html ( famiglia di caratteri:Calibri, sans-serif; sfondo:#eaf3fb; dimensione carattere:12px; altezza:1000px; altezza linea:18px; ) p ( altezza:30px; )

Selettori corpo,html vengono utilizzati solo per la pagina demo. E tutto il contenuto è posizionato in due rettangoli trascinabili.

Dv1 ( larghezza:200px; colore di sfondo:#eff7ff; bordo:1px solido #96c2f1; posizione:assoluta; sinistra:100px; superiore:100px; ) .dv1 h2 ( colore di sfondo:#b2d3f5; imbottitura:5px; font- famiglia:Georgia, "Times New Roman", Times, serif; dimensione carattere:1.0em; trasformazione testo: maiuscolo; peso carattere:grassetto; colore:#3a424a; margine:1px; cursore:sposta; ) .dv1 div ( imbottitura:5px; margine-bottom:10px; ) .dv2 ( colore di sfondo:#f6ebfb; bordo:1px solido #a36fde; larghezza:550px; posizione:assoluta; cursore:sposta; sinistra:400px; superiore:230px; ) .dv2 h2 ( colore di sfondo:#eacfe9; spaziatura tra lettere:-0,09em; dimensione carattere:1,8em; peso carattere: grassetto; imbottitura:15px; margine:1px; colore:#241f24; cursore:sposta; ) .dv2 .content2 (imbottitura:5px; margine-inferiore:10px;)

Per entrambe le classi .dv1 e .dv2 utilizziamo il posizionamento assoluto. Questo non è necessario e probabilmente non è il massimo Il modo migliore per posizionare i rettangoli trascinabili. Tuttavia, per il nostro esempio, questo posizionamento ha senso, poiché ogni volta che la pagina viene aggiornata, i rettangoli vengono installati in determinati punti.

Anche i caratteri e i colori sono diversi per i rettangoli per rendere più facile vedere la differenza.

Per il resto i titoli e il contenuto dei blocchi sono quasi identici. Se copierai gli stili nel tuo progetto, modifica i nomi prima di iniziare. In alcuni casi, ha più senso utilizzare gli ID anziché le classi, ad esempio quando si utilizza la tecnica di trascinamento della selezione per un blocco specifico.

Analisi di JavaScript

Due file JavaScript contengono tutto il codice necessario per farlo funzionare. Ometteremo i dettagli su come lavorare con jQuery, poiché va oltre lo scopo della lezione. Prestiamo attenzione al file jquery.dragndrop.js.

La riga 22 definisce la funzione Drags.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, handler: null, onMove: function() ( ), onDrop: function() ( ) ), opts );

Imposta la variabile di ritorno e i dati di inizializzazione per Trascina. Questo metodo è molto comunemente utilizzato quando si lavora con jQuery per passare opzioni ad altre funzioni. Internamente impostiamo variabili per tutti Opzioni disponibili per rettangoli trascinabili.

La parte successiva di codice include gestori di eventi per la variabile dragndrop. Entrambi gli eventi lagna E gocciolare chiamare le funzioni passando loro i parametri dell'evento. Questi eventi si verificano quando si preme il pulsante del mouse per trascinare un oggetto e quindi rilasciarlo.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( cursore: "sposta" )); dragData.target.css (( cursore: "sposta" )); dragData.onMove(e); ), drop: funzione( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursore", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Le nostre funzioni manipolano il posizionamento CSS di ciascun oggetto. La modifica del posizionamento assoluto dei tuoi oggetti non influirà sul funzionamento del tuo codice, poiché ogni funzione JavaScript modifica qualunque stile sia definito per l'oggetto.

Il resto del codice controlla il gestore e apporta modifiche estetiche ad altri stili. Qui puoi aggiungere modifiche alla trasparenza, al carattere e al colore del carattere oppure aggiungere nuovi paragrafi.

Funzioni di trascinamento/rilascio

Il secondo file fn.js contiene codice molto semplice. Aspettiamo che il documento sia completamente caricato, dopodiché chiamiamo le nostre funzioni. Sono definite due istanze della funzione Trascina, di cui si è parlato prima.

Abbiamo due blocchi mobili con le classi .dv1 e .dv2 . Se devi lasciare un blocco mobile, devi solo rimuovere la seconda parte del codice. Anche aggiungere un altro blocco mobile è facile. Devi solo aggiungere nuova caratteristica in questo file.

Il primo passo è impostare le opzioni quando si chiama la funzione. Assicurati di impostare il nome del gestore. Con esso, diciamo a jQuery quale gestore utilizzare quando si preme il pulsante del mouse in una determinata area del documento. Il nome del gestore può essere una classe o un attributo ID.

La nostra prima funzione ha due gestori di eventi onMove e onDrop. Entrambi chiamano nuove funzioni che vengono passate all'evento corrente come variabili. Qui è dove il codice HTML nel rettangolo viene manipolato per aggiornarsi ad ogni movimento. Questo è un ottimo effetto per dimostrare come è possibile controllare un processo utilizzando semplici eventi jQuery.

Nella seconda funzione utilizziamo i parametri z-Index e opacity. Puoi aggiungere altre proprietà CSS? ma ciò richiederà la rielaborazione del codice JavaScript in modo che le impostazioni vengano controllate. Ad esempio, puoi passare uno stile di carattere o valori diversi per l'altezza e la larghezza di un rettangolo in movimento: un trucco molto interessante!

Conclusione

Con un po' di lavoro, ora abbiamo a nostra disposizione un'ottima interfaccia drag-and-drop. jQuery offre enormi vantaggi agli sviluppatori desiderosi di utilizzare vecchi metodi nei loro progetti.

Di conseguenza, non solo abbiamo funzioni di gestione degli eventi, ma possiamo anche passare nuove variabili ai blocchi trascinabili. Ciò apre nuove possibilità per la creatività. La dimostrazione della lezione contiene solo uno schizzo di cosa si può fare utilizzando tale codice.

Quindi controlla la documentazione jQuery per utilizzare le funzioni della libreria.

È più facile prendere qualcosa e posarlo che scrivere cosa bisogna prendere e dove metterlo. Naturalmente senza mouse o dispositivi simili non è possibile selezionare o specificare nulla, ma anche allo stato attuale delle cose utilizzare l'idea del “drag and drop” è molto naturale e comodo.

La portata dell'idea non è solo negozi online, biblioteche elettroniche, motori di ricerca o Sistemi di informazione, e anche la sfera applicata. L'idea è molto applicabile nello sviluppo di siti web e dei loro elementi, creati e mantenuti in modo interattivo, senza la partecipazione di un programmatore.

Descrizione dell'idea

Selezionare, spostare e posizionare: l'idea è naturale e conveniente. È semplicemente sorprendente 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 con il mouse il prodotto desiderato e trascinarlo nel carrello è semplice, naturale e conveniente. Caricamento di file: anche un'idea pratica è portare un documento fuori dalla finestra del browser e posizionarlo su un elemento della pagina, facendo così scattare 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 più elementi e allinearli, nonché di spostare i lati dei tag dei blocchi.

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

Trasferimento file facile

“Drag and drop”: la traduzione dall’inglese al russo suona letteralmente come “drag and drop”. In pratica suona e funziona meglio: scelto, trasferito e rilasciato - semplice e naturale.

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

In questo esempio sono stati selezionati con il mouse più file sul desktop (figura a sinistra). Durante la selezione è stato premuto il pulsante 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 attorno ad esso i contorni dei file spostati.

Quando il mouse si è posizionato sopra il carrello, il visitatore ha rilasciato il tasto sinistro del mouse, ha avuto luogo l'evento “drag and drop” e sulla pagina del sito (immagine in basso) il codice JavaScript è riuscito a ricevere ed elaborare tutti i file forniti dal visitatore alla pagina (sito).

Descrizione dell'implementazione

Il codice che esegue questa procedura è molto semplice. Anche uno sviluppatore alle prime armi 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 un elenco di essi).

La logica della pagina è la seguente. Quando una pagina viene caricata nel browser, il gestore eventi "ondrop" viene assegnato al basket - put, gli altri eventi vengono bloccati e non utilizzati.

La pagina funziona come al solito, ma non appena il visitatore seleziona uno o più file e li trascina sull'immagine del carrello, cioè sul tag scPlaceFile, verrà avviata l'elaborazione dell'evento “i file sono 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 generato un elenco dei file ricevuti.

Dopo l'elaborazione, l'evento viene bloccato e non propagato. Ciò è necessario affinché il browser non intraprenda attività amatoriali e non interferisca con l'elaborazione delle informazioni ricevute.

DnD e dati esterni

Il caricamento di immagini sul server tramite trascinamento della selezione è una pratica comune nell'utilizzo di questa tecnologia. In genere, lo sviluppatore crea un modulo di caricamento file (1) che funziona come al solito (2). Il visitatore può selezionare i file e scaricarli come al solito.

Tuttavia, se un visitatore trascina e rilascia un punto specifico nel modulo, il campo del nome del file verrà compilato automaticamente.

Questo buona decisione. Ovviamente è molto difficile ammettere che non c'è il mouse sul computer. Ma è meglio sviluppare l'interfaccia utente nella versione abituale 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 elaborando 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. Il calcolo manuale è una buona pratica, ma l'opzione interattiva è più conveniente. Tutti i tag hanno sempre una forma rettangolare e, tracciando gli eventi del “mouse” sui lati degli elementi, puoi creare la possibilità di spostare automaticamente gli elementi nella posizione desiderata sulla pagina, o modificarli.

Gestire l'evento clic del mouse: ricordare le coordinate della posizione del clic, ad esempio uno dei lati dell'elemento. Muovendo 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 puoi modificare la posizione dell'elemento o la sua dimensione.

Formalmente non si tratta di “drag and drop”, ma l’effetto è simile e pratico. Creando gestori universali per qualsiasi elemento della pagina, puoi ottenere un buon risultato interattivo, accelerare lo sviluppo e semplificare il codice.

Programmazione visiva e manuale

Mouse sul computer e dita sullo smartphone: assolutamente approcci diversi all'implementazione dell'interfaccia utente (visitatore, sviluppatore). Il requisito della compatibilità tra browser è del tutto naturale e moderno.

Tutto questo insieme rende più difficile la creazione di pagine, ma applicando l'idea del “drag and drop” nella sua forma standard, utilizzando i suoi eventi, combinando questa idea con eventi ordinari sugli elementi, è possibile implementare un meccanismo in quale pagina verrà creata visivamente.

Ora diamo un'occhiata alla selezione di uno o più elementi. Il fatto della selezione è l'apparizione di un menu contestuale, ad esempio, l'obiettivo è allineare gli elementi selezionati (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 significano che l’obiettivo viene raggiunto più velocemente. Inoltre, puoi creare una pagina in un browser, salvando la posizione e la dimensione degli elementi. Aprendo questa pagina sul tuo smartphone potrai correggere le coordinate e le dimensioni e ricordarle per uno specifico modello di smartphone o versione di browser.

Pertanto, la stessa pagina senza rispettare manualmente i requisiti cross-browser avrà dati diversi visualizzati vari dispositivi e in vari browser.

Consentendo al visitatore di eseguire queste procedure in modo indipendente e anche di selezionare gli elementi necessari della pagina tra quelli forniti dallo sviluppatore, è possibile garantire la compatibilità tra browser e la funzionalità richiesta della pagina, tenendo conto dell'opinione dell'utente.

Uso della tecnologia trascinare e rilasciare(trascina e rilascia) 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: sink e source. Il destinatario è l'oggetto che riceverà l'oggetto di origine (l'oggetto da spostare).

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

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

OnDragOver(tipo TDragOverEvent) - crea un oggetto ricevente quando un oggetto trascinato si trova sopra di esso. Parametri passati al gestore eventi: oggetto destinatario Mittente (tipo TObject), oggetto sorgente Source (tipo TObject), stato movimento State (tipo TDragState), X e Y (tipo intero) - coordinate correnti del puntatore del mouse, Accetta ( type boolean ) segno di conferma dell'operazione di spostamento. Dallo stato di movimento risulta chiaro se l'oggetto da spostare si trova nell'area ricevente, si sta muovendo al suo interno o se l'ha lasciato. I parametri passati consentono all'oggetto di destinazione di accettare o rifiutare l'oggetto di origine. Il parametro Accept è impostato su Trye se l'operazione di spostamento viene accettata, altrimenti è impostato su False.

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

onEndDrag (tipo EndDragEvent): generato quando viene completata un'operazione di trascinamento. Le coordinate X e Y del punto in cui l'oggetto Sender di origine e l'oggetto Target del destinatario 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. Altrimenti l'inizio dell'operazione di trascinamento, il metodo BeginDrag, dovrà essere codificato dal programmatore.

Per consolidare il materiale, creeremo la seguente applicazione. Posiziona il componente Pannello sul modulo. Imposta la proprietà DragMode della finestra di ispezione oggetto su dmAutomatic. Selezioniamo l'oggetto del modulo e utilizziamo Object Inspector 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); inizia Panel1.Left:= X; Pannello1.In alto:= Y; FINE;

Ora avviando l'applicazione e facendo clic con il pulsante del mouse sopra il pannello, possiamo spostare l'oggetto pannello all'interno del modulo.

In conclusione: abbiamo conosciuto la tecnologia trascinare e rilasciare(trascina e rilascia) e lo ha utilizzato nella pratica.