JavaScript Drag and Drop

Rezumat: în acest tutorial, veți afla despre API-ul JavaScript drag and drop.

Introducere la JavaScript Drag and Drop API

HTML5 a introdus formal specificația drag-and-drop. Majoritatea browserelor web moderne au implementat drag-and-drop nativ pe baza specificațiilor HTML5.

În mod implicit, doar imaginea și textul pot fi glisabile. Pentru a trage o imagine, trebuie doar să țineți apăsat butonul mouse-ului și apoi să îl mutați. Pentru a trage textul, trebuie să evidențiați un text și să-l trageți în același mod în care ați trage o imagine.

Specificațiile HTML5 specifică faptul că aproape toate elementele pot fi glisabile. Pentru a face un element glisabil, adăugați proprietatea draggable cu valoarea true la eticheta HTML. De exemplu:

Code language: HTML, XML (xml)

Evenimente pe elemente glisabile

Când trageți un element, aceste evenimente se declanșează în următoarea succesiune:

• dragstart
• drag
• dragend

Când țineți apăsat un buton al mouse-ului și începeți să mutați mouse-ul, evenimentul dragstart se declanșează pe elementul glisabil pe care o tragi. Cursorul se transformă într-un simbol fără picătură (un cerc cu o linie prin el) pentru a indica faptul că nu puteți lăsa elementul în sine.

După dragstart evenimentul se declanșează, evenimentul drag se declanșează în mod repetat, atâta timp cât trageți elementul.

Și evenimentul dragend se declanșează când încetați să trageți elementul.

Ținta tuturor evenimentelor (e.target) este elementul care este tras.

În mod implicit , browserul nu schimbă aspectul elementului glisat. Prin urmare, puteți să-i personalizați aspectul în funcție de preferințele dvs.

Evenimente pe obiective de drop

Când trageți un element peste o țintă de drop validă, aceste evenimente se declanșează în următoarea secvență:

• dragenter
• dragover
• dragleave sau drop

Evenimentul dragenter se declanșează imediat în timp ce trageți elementul peste o țintă drop.

După ce evenimentul dragenter se declanșează, evenimentul dragover se declanșează în mod repetat atâta timp cât trageți elementul în limita țintei de drop.

Când trageți elementul în afara limitei țintei de drop, dragover evenimentul se oprește din declanșare și evenimentul dragleave se declanșează.

În cazul în care lăsați elementul pe țintă, drop evenimentul se declanșează în locul evenimentului dragleave.

Ținta ( ) din dragenter, dragover, dragleave și drop evenimentele sunt elementele țintă de eliminare.

Țintă validă de scădere

Aproape toate elementele acceptă evenimentele țintă de scădere (dragenter, dragover, dragleave și drop). Cu toate acestea, acestea nu permit scăderea implicită.

Dacă scăpați un element peste o țintă de scădere care nu permite scăderea, evenimentul drop a câștigat t fire.

Pentru a transforma un element într-o țintă validă de scădere, puteți suprascrie comportamentul implicit atât al dragenter, cât și al dragover evenimente apelând metoda event.preventDefault() în gestionarele de evenimente corespunzătoare. (Consultați secțiunea de exemplu pentru mai multe informații)

Transferați date utilizând obiectul Transfer de date

Pentru a transfera date într-o acțiune de glisare și plasare, utilizați dataTransfer obiect.

Obiectul dataTransfer este o proprietate a evenimentului. Vă permite să transferați date de la elementul glisat la ținta de fixare.

Obiectul dataTransfer are două metode: setData() și getData().

setData() vă permite să setați datele operației de tragere la formatul și datele specificate :

Code language: CSS (css)

Formatul poate fi text/plain sau text/uri-list. Și datele pot fi un șir care reprezintă datele de adăugat la obiectul de tragere.

Metoda getData() recuperează datele de tragere stocate de setData() metoda.

getData() acceptă un argument:

Formatul poate fi text/plain sau text/uri-list. getData() returnează un șir stocat prin metoda setData() sau un șir gol dacă operația de tragere nu include date.

Exemplu de drag and drop JavaScript

Vom dezvolta următoarea aplicație simplă drag-and-drop pentru a demonstra API-ul JavaScript drag and drop:

Creați structura proiectului

Mai întâi, creați un folder nou numit drag-n-drop-basics. În acest folder, creați două subfoldere numite css și js.

În al doilea rând, creați un fișier nou numit app.js în folderul js, style.css în css folder și index.html din folderul drag-n-drop-basics.

În al treilea rând, plasați linkul către style.css și eticheta de script care se leagă de app.js în fișierul index.html astfel:

Construiți fișierul index.html

Plasați următorul cod în fișierul index.html:

În acest fișier index.html, am folosit elementul .container pentru a alinia titlul și elementul drop-targets.

În interiorul elementului drop-target, a plasat trei div elemente cu aceeași clasă box. Și plasăm un alt element div cu clasa item în prima casetă.

Dacă deschideți index.html și încercați să trageți caseta galbenă, veți vedea cursorul care indică faptul că nu puteți trage:

Pentru a face elementul glisabil, adăugați proprietatea draggable cu valoarea true la eticheta HTML, după cum urmează:

Code language: JavaScript (javascript)

Acum, dacă salvați index.html, deschideți-l în browser din nou, veți vedea că puteți trage elementul element astfel:

Gestionează evenimente pe elementul glisabil

Fișierul style.css are .hide clasă care ascunde un element:

Code language: CSS (css)

În fișierul app.js, adăugați următorul cod:

Cum i funcționează:

• Mai întâi, selectați elementul glisabil folosind querySelector().
• În al doilea rând, atașați un dragstart handler de evenimente la elementul glisabil.
• În al treilea rând, definiți funcția dragStart() pentru a gestiona dragstart eveniment.

Dacă deschideți fișierul index.html și începeți să trageți elementul glisabil, veți vedea mesajul drag starts... în consola.

În gestionarul de evenimente dragStart, trebuie să stocați id al elementului glisabil. Și trebuie să îl ascundeți:

Dacă trageți elementul, veți vedea că acesta dispare odată ce începeți să trageți.

Pentru a rezolva acest lucru, utilizați setTimeout():

Acum, puteți trage elementul glisabil din poziția sa originală:

Gestionează evenimente pe ținte de drop

Fișierul style.css are și o clasă CSS numită .drag-over care transformă stilul de margine al țintei drop în puncte și roșu:

Code language: CSS (css)

În app.js, aveți nevoie pentru a selecta elementele țintă de eliminare și pentru a gestiona dragenter, dragover, dragleave și drop evenimente ale acestor elemente:

Stilul chenar al țintei drop trebuie să se schimbe atunci când dragenter și dragover apare evenimentul. Ar trebui să restabilească stilul atunci când apar evenimentele dragleave și drop.

Pentru a face acest lucru, adăugați și eliminați clasa drag-over la ținta drop astfel:

Acum, dacă trageți elementul glisabil către o altă picătură țintă, veți vedea că marginea țintei drop se modifică după cum se arată în următoarea imagine:

Pentru a face ca obiectivul drop să fie valid, trebuie să apelați event.preventDefault() în dragenter și dragover gestionari de evenimente ca acesta:

Dacă nu faceți acest lucru, evenimentul drop nu va fi niciodată declanșează, deoarece elementul div nu este în mod implicit o țintă de fixare validă.

Dacă trageți elementul glisabil către o țintă de fixare, veți vedea că cursorul modificări care indică faptul că puteți renunța la element:

Acum, dacă renunțați la elementul element, veți vedea că acesta dispare imediat.

Pentru a rezolva acest lucru problema, trebuie să adăugați mânerul evenimentului drop.

• Mai întâi, obțineți id al elementului glisabil utilizând metoda getData() a dataTransfer obiect.
• În al doilea rând, adăugați elementul glisabil ca element secundar al elementului țintă.
• În al treilea rând, eliminați hide clasă din elementul draggable.

Următorul cod arată drop handler de evenimente:

Dacă glisați și fixați elementul glisabil acum, acesta ar trebui să funcționeze conform așteptărilor.

Următorul arată fișierul complet app.js:

Și iată linkul către demonstrație.

Rezumat

• Adăugați proprietatea draggable cu valoarea true la un element pentru a-l face glisabil.
• dragstart, drag și dragend evenimentele se declanșează asupra elementului glisabil.
• dragenter, dragover, sau drop evenimentele se declanșează asupra obiectivului drop.
• Apelați event.preventDefault() de pe dragenter și dragover gestionare de evenimente pentru a transforma un element într-o țintă validă de eliminare.
• Utilizați event.dataTransfer obiect cu metodele setData() și getData() pentru a transfera date în operația de tragere și plasare.