Indholdsfortegnelse
Allerede i den første del af denne vejledning så vi, hvordan vi starter træk begivenhed at trække elementerne, det vil sige, at vi gjorde en del af arbejdet, vi så, hvordan vi interagerede med de forskellige begivenheder i det første afsnit.Nu skal vi vide, hvordan vi aktiverer det område, hvor elementet skal deponeres, det er allerede den komplementære handling, der giver os mulighed for at opnå komplette funktioner på vores side.
Oprettelse af deponeringsområdet
Dette er det område, hvor vi vil forlade de elementer, vi trækker, for at manipulere dette område skal vi have flere begivenheder, for bedre at forstå, hvordan vi håndterer disse begivenheder, vil vi liste hver enkelt og forklare, hvordan det fungerer .
Begivenheder
- Dragenter: Det aktiveres, når et trækket element kommer ind i det rum på skærmen, som vi har defineret for deponeringsområdet.
- Dragover: Det udløses, når det trækkede element bevæger sig inden for det deponeringsområde, som vi allerede har defineret.
- Dragleave: Den aktiveres i det øjeblik, hvor et slæbt element forlader deponeringsområdet.
- Dråbe: Det er begivenheden, der aktiveres, når en vare efterlades i indbetalingsområdet.
Når vi ved, hvilke begivenheder vi har til rådighed, skal vi bygge en simpel kode, hvor den når vi taber eller deponerer et element, som vi har trukket, vises i indbetalingsområdet.
Til dette vil vi bruge nogle funktioner i indre HTML hvor vi skal klone det element, der kastes ind i området.
Lad os se eksemplet på kode:
Eksempel
Drop her
Hvis vi ser nærmere på, definerer vi målelementet som det element, der vil indeholde deponeringsområdet, når dette er gjort, definerer vi, hvad der vil ske i hver af hændelserne, hvis vi ser på drop begivenhed er det sidste trin, hvor vi vil klone det trækkede element og takket være indre HTML vi kommer til at vise det asynkront, når vi taber elementet, som vi har trukket.
En anden ting, vi skal være opmærksom på, er at overskrive browserens standardhændelse, vi klarer dette, når vi opretter funktionen håndtagDragPå denne måde forhindrer vi browseren i at fortolke instruktionerne på en måde, der ikke forventes af os.
I vores browser skal det se sådan ud:
