cum se Drag & Drop elemente HTML și fișiere folosind Javascript

pentru a defini un efect picătură, trebuie urmați următorii pași:

5.1. Determina Permis Picătură Efect(e) pe Draggable Element în dragstart Tratare a Evenimentului

Utilizarea effectAllowed proprietate pe dataTransfer eveniment de proprietate, puteți defini toate drop efecte care pot fi aplicate pentru că draggable element.acest lucru se face ca diferite locații picătură pot fi definite și diferite efecte picătură pot fi manipulate pe picătură locație.,

următorul tabel definește posibil effectAllowed valorile de proprietate în baza MDN docs:

5.2. Pentru fiecare locație picătură, definiți efectul picătură (E) pentru ea în este dragover Event Handler

efectul picătură care urmează să fie definit trebuie să fie unul dintre efectele permise determinate la dragstart event handler din locația sursă.,când un efect de picătură nu este unul dintre efectele de picătură permise, acesta va fi setat la unul dintre efectele de picătură permise.

dragover handler, unde trebuie definit efectul drop, este executat atunci când elementul târât este tras peste o posibilă locație drop.

Următorul este un exemplu de definire a efectelor picătură pentru o anumită locație picătură.

6) Definesc o Picătură Zona (Locația)

în mod implicit, nu există niciun element în documentul HTML permite o picătură., Cu toate acestea, care poate fi schimbat și pentru a face un element o zonă drop, acesta trebuie să aibă:

• ondragover event handler, care este executat atunci când elementul draggable este tras peste acest element. În acest handler de evenimente, efectul de cădere al locației de cădere este definit așa cum s-a menționat anterior la Pasul 5.2.
• handler-ul de evenimente ondrop, care este executat atunci când elementul draggable este abandonat în locația/zona de tragere.

următorul este un exemplu de definire a unui element ca locație picătură.,

În ambele dragover și drop event handlers, preventDefault() trebuie să fie chemat pentru a permite o picătură ca aceasta indică faptul că o picătură este permis la acea locație.dacă o picătură va fi permisă numai în anumite situații în care sunt utilizate condiții, atunci adăugați prevendefault numai dacă sunt îndeplinite condițiile pentru a permite o picătură. Acest lucru se face pentru a preveni ca elementul să fie o zonă de cădere dacă nu sunt îndeplinite condițiile în care nu ar trebui permisă căderea.,

respingerea unei picături pe baza tipului de date de tragere din proprietatea dataTransfer este un caz comun. Următorul exemplu demonstrează că permițând doar link-uri pentru a fi scăzut în elementul zona picătură care are dragover handler.

7) Ocupa Element Drop

în Timpul picătură eveniment, trage de date trebuie să fie prelucrate. Pentru a face acest lucru, se utilizează metoda getData() din proprietatea evenimentului dataTransfer.,

metoda getData () preia elementele de tragere, deoarece este nevoie de un singur argument al tipului de date de recuperat și va returna valoarea șirului asociată cu acesta.proprietățile allowedEffect și dropEffect ajută la controlul feedback-ului care va fi prezentat utilizatorului.manipularea unui astfel de feedback este responsabilitatea dezvoltatorului și ar trebui implementată în handler-ul evenimentului drop. De exemplu, preluarea unui element și adăugarea acestuia la un alt părinte îl va muta, dar copierea nodului va avea ca rezultat un efect de copiere.,

Dacă sunt definite mai multe efecte de cădere pentru o singură zonă de cădere, proprietatea dropEffect trebuie utilizată pentru a determina ce operație de tragere a fost dorită pentru acest eveniment special.

Următorul este un exemplu de manipulare a unei picături.

Uneori, poate fi susținută de diferite tipuri de aceleași date, dar vreau doar pentru a prelua cele mai specifice de tip. Următorul cod din MDN docs demonstrează acest lucru.,

8) Utilizarea dragend Eveniment pentru a Verifica dacă scăderea a fost de Succes

La sfârșitul de o operație de tragere, un dragend eveniment, trage de la sursă element. Evenimentul se declanșează dacă tragerea a avut succes sau a fost anulată.

Pentru a verifica dacă operație de tragere a fost de succes sau nu, valoarea dropEffect pot fi verificate fi următoarele:

• Dacă dropEffect proprietății este valoarea „none” în dragend handler de eveniment, atunci înseamnă că operațiile de tragere a fost anulat.,
• în caz contrar, valoarea proprietății dropEffect este operația care a fost efectuată cu succes.Hmm, Deci cum este util acest lucru?

  elementul sursă poate utiliza aceste informații după o operație de mutare reușită pentru a elimina elementul târât din locația veche.

  Demo pe Element HTML e Drag & Drop

  Notă: de asemenea, puteți clona proiectul de la Github mea aici.,

  

  1) Detect the Drag & Drop Feature Support in Your Browser

  Before using the HTML drag & drop API, add feature detection code to ensure browser support.

  The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

  2) Defini o Picătură Zona (Locația)

  în mod implicit, nu există niciun element în documentul HTML permite o picătură. Cu toate acestea, care poate fi schimbat și pentru a face un element o zonă picătură, acesta trebuie să aibă:

  • ondragover event handler, care este executat atunci când fișierul(E) este/sunt târât peste locația picătură.
  • handler-ul de evenimente ondrop, care este executat atunci când fișierele sunt/sunt aruncate în locația drop.,

  după Cum sa afirmat de MDN documente:

  dragstart și dragend evenimente nu sunt concediat atunci când glisarea unui fișier în browser-ul de sistem de OPERARE.

  Următorul este un exemplu pentru definirea unui element ca locație picătură.

  3) Mâner picătură fișierului

  când utilizatorul picături fișierul(E) într-o zonă picătură, un eveniment picătură va fi declanșat. În timpul evenimentului drop, fișierele trebuie procesate după cum doriți.,

  pentru a accesa fiecare fișier căzut, utilizați proprietatea DataTransfer a evenimentului pentru a accesa proprietatea fișiere. După accesarea unui fișier abandonat, utilizați API-ul fișierului pentru a-l procesa.dacă browserul acceptă proprietatea DataTransferItemList, o puteți utiliza cu metoda getAsFile () în loc să utilizați proprietatea DataTransfer pentru a accesa fișierul.

  atât în dragover și Drop event handlers, preventDefault() trebuie să fie numit pentru a permite o picătură, deoarece indică faptul că o picătură este permisă în acea locație., De asemenea, împiedică deschiderea fișierului, care este comportamentul implicit care apare atunci când aruncați un fișier într-o pagină web.dacă o picătură va fi permisă numai în anumite situații în care sunt utilizate condiții, atunci adăugați prevendefault numai dacă sunt îndeplinite condițiile pentru a permite o picătură. Acest lucru se face pentru a preveni ca elementul să fie o zonă de cădere dacă nu sunt îndeplinite condițiile în care nu ar trebui permisă căderea.

  următorul exemplu, din MDN docs, demonstrează procesarea fișierelor abandonate, unde un element de tragere care nu este un fișier este ignorat., Both possible ways are demonstrated in this

  Demo on HTML Element’s Drag & Drop

  Note: you can also clone the project from my Github here.

---