Cuprins
Deja în prima parte a acestui tutorial am văzut cum să începem glisați evenimentul de a trage elementele, adică am făcut o parte din lucrare, am văzut cum să interacționăm cu diferitele evenimente din acea primă secțiune.Acum trebuie să știm cum să activăm zona în care să depunem elementul, este deja acțiunea complementară care ne va permite să realizăm funcționalități complete pe pagina noastră.
Crearea zonei de depozit
Aceasta este zona în care vom lăsa elementele pe care le tragem, pentru a manipula această zonă vom avea mai multe evenimente, pentru a înțelege mai bine cum să gestionăm aceste evenimente, vom enumera fiecare și vom explica cum funcționează .
Evenimente (editați)
- Dragenter: Se activează atunci când un element glisat intră în spațiul de pe ecran pe care l-am definit pentru zona de depunere.
- Trage peste: Se declanșează atunci când elementul glisat se deplasează în zona de depozit pe care am definit-o deja.
- Dragleave: Este activat în momentul în care un element glisat părăsește zona de depozit.
- Cădere brusca: Este evenimentul care este activat atunci când un articol este lăsat în zona de depozit.
Odată ce știm ce evenimente avem la dispoziție, vom construi un cod simplu, în care atunci când aruncăm sau depunem un element pe care l-am tras, acesta este afișat în zona de depozit.
Pentru aceasta vom folosi unele funcții ale HTML interior unde vom clona elementul care este aruncat în zonă.
Să vedem exemplul de cod:
Exemplu
Treci aici
Dacă privim cu atenție, definim elementul țintă ca elementul care va conține zona de depozit, odată ce acest lucru este făcut, definim ce se va întâmpla în fiecare dintre evenimente, dacă ne uităm la cadere eveniment aici se produce pasul final, aici vom clona elementul tras și datorită HTML interior o vom arăta asincron când vom lăsa elementul pe care l-am tras.
Un alt lucru la care trebuie să fim atenți este să suprascriem evenimentul implicit al browserului, gestionăm acest lucru atunci când creăm funcția handleDragÎn acest fel, împiedicăm browserul să interpreteze instrucțiunile într-un mod care nu este așteptat de noi.
În browserul nostru ar trebui să arate astfel:
