Innholdsfortegnelse
Allerede i den første delen av denne opplæringen så vi hvordan vi starter dra hendelse for å dra elementene, det vil si at vi gjorde en del av arbeidet, vi så hvordan vi skulle samhandle med de forskjellige hendelsene i den første delen.Nå trenger vi å vite hvordan vi aktiverer området der elementet skal deponeres, det er allerede den komplementære handlingen som vil tillate oss å oppnå fullstendige funksjoner på siden vår.
Opprette innskuddsområdet
Dette er området der vi skal forlate elementene vi drar, for å manipulere dette området skal vi ha flere hendelser, for bedre å forstå hvordan vi skal håndtere disse hendelsene, vil vi liste opp hver enkelt og forklare hvordan det fungerer .
Hendelser (rediger)
- Dragenter: Den aktiveres når et dratt element kommer inn i rommet på skjermen som vi har definert for innskuddsområdet.
- Dragover: Det utløses når det slepte elementet beveger seg innenfor innskuddsområdet som vi allerede har definert.
- Dragleave: Den aktiveres i det øyeblikket et slept element forlater forekomsten.
- Miste: Det er hendelsen som aktiveres når en gjenstand er igjen i innskuddsområdet.
Når vi vet hvilke hendelser vi har til rådighet, skal vi bygge en enkel kode, der når vi slipper eller deponerer et element som vi har dratt, vises det i innskuddsområdet.
For dette vil vi bruke noen av funksjonene til indre HTML hvor vi skal klone elementet som kastes inn i området.
La oss se eksempelkoden:
Eksempel
Slipp hit
Hvis vi ser nøye ut, definerer vi målelementet som elementet som vil inneholde forekomstområdet, når dette er gjort definerer vi hva som vil skje i hver av hendelsene, hvis vi ser på slipp hendelse er der det siste trinnet skjer, her vil vi klone det dra elementet og takket være indre HTML vi skal vise det asynkront når vi slipper elementet som vi har dratt.
En annen ting vi må ta hensyn til er å overskrive standardhendelsen til nettleseren, vi klarer dette når vi lager funksjonen handleDragPå denne måten forhindrer vi nettleseren i å tolke instruksjonene på en måte som vi ikke forventer.
I nettleseren vår skal den se slik ut:
