Per molto tempo sono esistite funzioni JavaScript che ci consentono di creare interfacce di trascinamento e rilascio, ma nessuna di queste implementazioni era nativa per il browser.
In HTML5, abbiamo un metodo nativo per creare interfacce drag and drop (con un piccolo aiuto da JavaScript).
Vi farò conoscere come ottenere questo ...
Mi piacerebbe toglierlo di mezzo prima che progrediamo: attualmente il drag-and-drop HTML5 è supportato da tutti i principali browser desktop (incluso IE (anche IE 5.5 ha un supporto parziale)) ma non è attualmente supportato da nessuno dei popolari dispositivi mobili i browser.
In ogni fase dell'operazione di trascinamento della selezione viene generato un evento diverso in modo che il browser sappia quale codice JavaScript eseguire; gli eventi sono:
Con tutti questi listener di eventi hai un grande controllo su come funziona la tua interfaccia e su come si comporta in diverse circostanze.
Qui è dove avviene tutta la magia drag and drop; questo oggetto contiene i dati inviati dall'operazione di trascinamento. I dati possono essere impostati e recuperati in vari modi, i più importanti sono:
Ora inizieremo a creare il nostro semplice esempio di trascinamento della selezione, puoi vedere che abbiamo due div piccoli e uno più grande, possiamo trascinare e rilasciare i piccoli all'interno di quello grande e possiamo anche spostarli indietro.
La prima cosa che dobbiamo fare è creare il nostro HTML. Rendiamo i div trascinabili con l'attributo trascinabile, in questo modo:
draggable="true">Quando ciò è fatto, dobbiamo definire la funzione javascript che verrà eseguita quando inizieremo a trascinare questo elemento:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}In questo codice prima dichiariamo quale tipo di effetto permettiamo nell'operazione e lo impostiamo per spostarci, nella seconda linea impostiamo i dati per l'operazione e in questo caso il tipo è Testo e il valore è l'ID dell'elemento stiamo trascinando. Dopodiché usiamo il metodo setDragImage per impostare ciò che trascineremo e dove sarà il cursore durante il trascinamento, e poiché i cubi sono 200 per 200 px l'ho posizionato esattamente al centro. Alla fine ritorniamo veri.
Affinché un elemento accetti una goccia, ha bisogno di ascoltare 3 eventi diversi: dragEnter, dragOver e anche l'evento drop , quindi aggiungiamolo al nostro html nel div con l'ID di big:
Ora che abbiamo aggiunto gli ascoltatori di eventi, abbiamo bisogno di creare queste funzioni che inizieremo dagli eventi dragenter e dragover:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}Nella prima funzione definiamo ciò che vogliamo accadere quando l'elemento che stiamo trascinando raggiunge l'elemento in cui dovrebbe essere inserito, in questo caso si impedisce solo il comportamento predefinito del browser ma è possibile fare qualsiasi numero di cose come cambiare il sfondo o aggiungere del testo per indicare che l'utente sta trascinando nell'area corretta e utilizzando l'evento dragleave è possibile annullare le modifiche apportate. Successivamente nella funzione dragOver semplicemente impediamo il default per consentire il rilascio.
La parte successiva è dove definiamo la funzione per quando effettivamente rilasciamo l'elemento sulla destinazione desiderata:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}In questa ultima parte impostiamo innanzitutto una variabile chiamata data in cui otteniamo tutti i dati disponibili per il formato testo e quindi aggiungiamo quei dati (che saranno l'elemento che stiamo trascinando) al div dove vogliamo lasciare l'elemento. Infine alcuni tocchi finali come fermare la propagazione e anche restituire false.
verifica la demo , puoi vedere che abbiamo anche fatto in modo che i due div possano essere riportati alla loro posizione originale. Fortunatamente, aggiungere un altro drop target potrebbe essere più semplice di quanto pensi; poiché le funzioni sono già in atto, tutto ciò che dobbiamo fare è aggiungere gli ascoltatori di eventi, in questo modo:
E questo è tutto ciò di cui abbiamo bisogno per consentire il trascinamento dei tuffi nel luogo originale.
Ci sono un sacco di applicazioni drag and drop create usando le librerie JavaScript, ed è spesso più semplice usare quelle librerie. Ma spero che, in questa tecnica HTML5 e JavaScript, tu veda il potenziale futuro della soluzione nativa.
Hai costruito un'interfaccia drag and drop? In che modo HTML5 nativo si confronta con le sole soluzioni JavaScript? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, rilascia l'immagine tramite photophilde.