Creați un simplu html5 „drag - drop“ interfață

LPgenerator - Professional Pagina de destinație Platforma pentru a crește vânzările afacerii dvs.

Aterizare MAGAZIN DE FORMARE curs de acțiune din partea partenerilor

În prezent, HTML5 trageți picătură este susținută de toate browserele majore pentru desktop-uri (inclusiv IE (chiar și în IE 5.5 are suport parțial)), dar nu este susținută de oricare dintre populare browsere mobile.

• dragStart: a declanșat atunci când utilizatorul începe să drag and drop;
• dragEnter: a declanșat atunci când un element de draggable este mai întâi tras peste elementul țintă;
• dragOver: incendii când mouse-ul este mutat peste un element când o tragere;
• dragLeave: se declanșează atunci când utilizatorul părăsește mouse-ul peste un element când trageți;
• trageți: intră în acțiune de fiecare dată când mutați mouse-ul în timp ce trageți elementul nostru;
• picătură: începe atunci când se efectuează scăderea reală;
• dragEnd: a declanșat atunci când utilizatorul eliberează butonul mouse-ului în timp ce trageți obiectul.

Cu toate acestea ascultătorii eveniment, aveți un bun control asupra modului în care va funcționa interfața.

Aceasta este în cazul în care magia se întâmplă dragdrop. Acest obiect conține date care a fost trimis operație de tragere. Datele pot fi montate și primite în diverse moduri, dintre care cele mai importante sunt:

Crearea de exemplu dragdrop

Acum vom începe să creeze un exemplu simplu dragdrop. După cum puteți vedea, avem două divuri mici și unul mare, putem trage micile dive într-o mare, și chiar a le muta înapoi.

Primul lucru pe care trebuie să facem este să creați HTML. Noi facem div draggable folosind atributul draggable:

În acest cod, declarăm mai întâi ce tip de efect, pentru a permite funcționarea și setați-l în mișcare. În al doilea rând, ne-am stabilit datele pentru care textul va fi valoarea de text și ID articol, pe care le trage. După aceea, vom folosi metoda setDragImage care determină că vom fi târât, și apoi în cazul în care se va cursorul în timpul tragerii, precum și blocuri de 200 cu 200 pixeli, l-am pus în centru. În final, ne întoarcem return true.

Pentru a elimina un element de luat, el trebuie să asculte 3 evenimente diferite: dragEnter, dragOver și evenimente picătură. Deci, să-l adăugați la HTML5 nostru într-un div cu ID-ul unui mare (mare):

După ce vom adăuga ascultătorilor eveniment, avem nevoie pentru a crea aceste funcții. Să începem cu dragEnter dragOver și evenimente:

Prima funcție definim ce ar trebui să se întâmple atunci când un element pe care le trage pentru a ajunge la elementul dorit, care trebuie să aibă loc picătură, în acest caz, ne împiedică doar comportamentul implicit al browser-ului. În continuare, în funcție de dragOver, noi pur și simplu nu acceptă că a existat o scădere în mod implicit.

În partea următoare, vom defini o funcție atunci când elementul este „aruncat“ pe obiectivul dorit:

În această ultimă parte, vom stabili mai întâi datele variabile, în cazul în care vom obține toate datele care sunt disponibile pentru formatul de text, și apoi vom adăuga datele la un div, în cazul în care necesitatea de a „drop“ elementul.

Asigurați-scop secțiune picătură

Demo-ul arată că cele două div pot fi mutate înapoi în loc. Din fericire, adăugând un alt gol picătură, mult mai ușor decât crezi. Datorită acestor caracteristici, avem deja tot ceea ce trebuie să facem este să adăugați ascultătorii eveniment:

Și asta este tot ceea ce este necesar pentru a permite tragerea div în loc.

LPgenerator - Professional Pagina de destinație Platforma pentru a crește vânzările afacerii dvs.

ATENȚIE! Utilizați un browser învechit Internet Explorer

Acest site este construit pe tehnologii avansate, moderne și nu acceptă al doilea Internet Explorer și versiunea a șaptea.