HTML5 Drag and Drop (Română)

Din HTML5 este posibil să trageți și să plasați elemente HTML în interiorul unei pagini HTML. Prin ascultătorii eveniment JavaScript puteți decide ce se întâmplă atunci când utilizatorul trage și picături elemente.

în timpul drag and drop elemente HTML pot lua pe două roluri:

1. Draggable
2. Drop țintă / drop zone.

elementul draggable este elementul pe care utilizatorul ar trebui să fie capabil de a trage în jurul paginii HTML și picătură undeva, pentru unele acțiuni să apară. Acesta poate fi unul sau mai multe elemente.,

ținta de cădere sau zona de cădere este elementul pe care sunt aruncate elementele draggable.pentru a controla ce se întâmplă atunci când trageți și plasați elemente HTML, trebuie să efectuați 3 pași:

1. setați elementele HTML la draggable.,
2. Atașare ascultătorii eveniment la draggable elementele HTML
3. Atașare ascultătorii eveniment la drop target elementele HTML

evenimente și atribute sunt ilustrate aici:

Prima setați draggable="true" atribut pe element HTML(s) pentru a face draggable.

în al Doilea rând atașați ascultătorii eveniment pe draggable element dragstart și dragend evenimente., În interiorul acestor ascultători de evenimente puteți implementa ceea ce urmează să se întâmple atunci când utilizatorul începe să tragă elementul și când se termină glisarea.

În al treilea rând atașați ascultătorii de evenimente pe elementul țintă picătură. Evenimentele puteți asculta pentru ca sunt dragenter, dragover, dragleave și drop.

dragenter eveniment este tras atunci când utilizatorul trage draggable pe țintă picătură., Acest eveniment se declanșează numai atunci când elementul draggable se schimbă de la a fi afară la a fi terminat, care este de obicei determinat de poziția cursorului mouse-ului.

odată ce elementul draggable este peste ținta drop, evenimentuldragover se declanșează și continuă să tragă atâta timp cât elementul draggable este tras peste ținta drop.

dacă utilizatorul trage obiectul draggable din ținta drop din nou, evenimentul dragleave este concediat.

dacă utilizatorul renunță la obiectul draggable pe ținta drop, evenimentul drop este concediat.,

trageți și plasați exemplu de eveniment

Iată un exemplu cu care vă puteți juca. Încercați să trageți logo-ul HTML5 pe țintă picătură și să vedem ce se întâmplă. Încercați să aruncați imaginea și să o trageți din nou.

Drag and Drop Cod

Să ne aruncăm o privire la cum să se ocupe de drag and drop evenimente., Pentru a vedea că vom crea mai întâi un element <img> pe care îl putem trage. Aici este codul HTML pentru că:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

odată ce avem un element draggable avem nevoie de o țintă picătură. Voi folosi un element <div>:

<div style="width: 200px; height: 200px;">Drop here</div>

odată ce avem elementul draggable și elementul țintă drop, trebuie să atașăm ascultătorii evenimentului., Aici este codul JavaScript pentru care:

dragStart()funcția apeluri event.dataTransfer.setData() pentru a seta datele care sunt transferate la țintă picătură atunci când elementul este scăzut. Oricare ar fi datele de care aveți nevoie pentru a termina corect acțiunea drop, setați-o aici. Setați atât datele, cât și tipul mime.

dragOver() și drop() stivuitoare eveniment atat de apel event.preventDefault() și întoarce false. Acest lucru este necesar pentru ca drag and drop să funcționeze corect., Browserul poate avea un comportament implicit de tragere și plasare pe care trebuie să îl dezactivați pentru a face Codul să funcționeze.

Observați, de asemenea, că drop() event handler funcția citește un set de date în dragStart() prin apelul la event.dataTransfer.getData(). Acesta trece tipul mime de date ca parametru pentru a extrage în mod corespunzător.

acesta este tot ceea ce este necesar pentru a implementa drag and drop în HTML5. Puteți face totuși un pic mai plăcut vizual, așa cum vom vedea în secțiunea următoare.,

Feedback vizual

puteți utiliza funcțiile de gestionare a evenimentelor drag and drop pentru a oferi utilizatorului un feedback vizual mai explicit.

În primul rând, puteți marca elementul târât astfel încât utilizatorul să poată vedea ce element trage. Dacă mai multe elemente arată la fel și toate pot fi târâte, este bine ca utilizatorul să vadă care dintre ele este târât. Puteți face acest lucru ca răspuns la dragstart eveniment. Iată un exemplu:

odată ce tragerea se termină, dorim să eliminăm din nou marginea., Acest lucru se face ca răspuns la dragend eveniment. Iată cum se face acest lucru:

Acum, utilizatorul va primi feedback vizual care arată ce element este tras.de asemenea, dorim să arătăm utilizatorului că este posibil să renunțe la elementul draggable atunci când este târât peste ținta picătură. Din nou, vom schimba marginea elementului. Vom face deci, ca răspuns la dragenter, dragleave și drop evenimente., Iată cum se face acest lucru:

acum, marginea țintei de picătură va deveni verde și punctată atunci când elementul draggable este tras peste el. Marginea va fi eliminată atunci când elementul draggable este tras din nou, sau în cazul în care elementul este scăzut pe țintă picătură.

exemplul de mai sus nu a afișat funcția de gestionare a evenimentelor dragOver(), dar asigurați-vă că o adăugați pentru a preveni comportamentul implicit al browserului.,

Aici este codul complet după feedback-ul vizual a fost adăugat:

De DataTransfer Obiect, effectsAllowed, dropEffect si setDragImage()

puteți crește feedback-ul vizual dat de utilizator în timpul de drag & drop folosind DataTransfer obiect. Obiectul DataTransfer are 2 atribute și o funcție pe care o puteți utiliza în acest scop., Acestea sunt:

• effectsAllowed
• dropEffect
• setDragImage()

Aveți acces la DataTransfer obiect în dragstart și drop eveniment obiecte. Aici este un exemplu dragstart ascultător funcția care stabilește effectsAllowed proprietate pe DataTransfer obiect:

effectsAllowed proprietate este utilizat de browsere pentru a schimba cursorul mouse-ului pentru a arăta ce fel de acțiune este realizată atunci când glisarea și fixarea unui element., De obicei, cursorul mouse-ului se schimbă atunci când elementul târât este peste o țintă picătură. Nu înainte. Valorile valide pentru effectsAllowed proprietate sunt:

• nimic
• copy
• mutare
• copyMove
• link
• linkMove
• copyLink
• toate
• neinitializata

dropEffect ar trebui să arate utilizatorului (prin intermediul cursorului) ce se întâmplă atunci când mouse-ul trece peste un drop target, dar la momentul de scris (feb. 2014) browserele par să ignore acest lucru., Valorile valide pentru dropEffect proprietăți:

• nimic
• copy
• link
• mutare

setDragImage(image, x, y) funcție poate fi utilizată pentru a seta imaginea afișată de către browser atunci când utilizatorul trage un element. În mod implicit, browserul afișează o copie semi-transparentă a elementului original, dar dacă doriți o imagine diferită, puteți seta o imagine diferită folosind această funcție. x și y properties poate fi folosit pentru a seta locația compensează pentru imagine atunci când sunt afișate., În mod implicit, colțul din stânga sus al imaginii de tragere este situat în vârful indicatorului mouse-ului. Prin setarea diferitelor proprietăți xși y puteți schimba acest lucru. Puteți folosi fie pozitiv sau negativ x și y compensează.

Aici este un exemplu de cod arată cum să setați o trageți imaginea în interiorul dragStart() ascultător eveniment funcția:

Aici este un exemplu care vă permite să se joace cu diferite setări pe DataTransfer obiect., Încercați să schimbați effectsAllowed și trageți imaginea și vezi ce se întâmplă atunci când trageți HTML5 logo-ul în jos peste div drop țintă.

Glisarea Fișiere În Browser-ul

este posibil să trageți fișiere în browser-ul de sistem de fișiere, și citi numele și conținutul târât fișiere de JavaScript. Faceți acest lucru prin API-ul fișierului HTML5., Aici este un ascultător țintă picătură care detectează numele fișierului fișierului târât:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.