HTML5 - Drag & Drop, drugi dio

Već smo u prvom dijelu ovog vodiča vidjeli kako započeti drag događaj povlačenja elemenata, odnosno odradili smo dio posla, vidjeli smo kako stupiti u interakciju s različitim događajima tog prvog odjeljka.
Sada moramo znati kako aktivirati područje na koje ćemo staviti element, to je već komplementarna radnja koja će nam omogućiti postizanje potpunih funkcionalnosti na našoj stranici.
Stvaranje područja za polaganje
Ovo je područje u kojem ćemo ostaviti elemente koje povlačimo, kako bismo manipulirali ovim područjem imat ćemo nekoliko događaja, kako bismo bolje razumjeli kako postupati s tim događajima, navest ćemo svaki od njih i objasniti kako to funkcionira .
Događaji (uredi)

• Dragenter: Aktivira se kada povučeni element uđe u prostor na ekranu koji smo definirali za područje polaganja.
• Dragover: Pokreće se kada se povučeni element pomiče unutar područja naslaga koje smo već definirali.
• Dragleave: Aktivira se u trenutku kada povučeni element napusti područje taloženja.
• Pad: To je događaj koji se aktivira kada stavka ostane u području za polaganje.

Primanje predmeta
Kad saznamo koje događaje imamo na raspolaganju, izgradit ćemo jednostavan kod u kojem se prilikom ispuštanja ili odlaganja elementa koji smo povukli prikazuje u području za polaganje.
Za to ćemo koristiti neke funkcije unutarnji HTML gdje ćemo klonirati element koji je bačen u područje.
Pogledajmo primjer koda:

 Primjer  
Spustite ovdje

Ako pomno pogledamo, definiramo ciljni element kao element koji će sadržavati područje pologa, nakon što to učinimo definiramo što će se dogoditi u svakom od događaja, ako pogledamo događaj ispuštanja gdje se događa posljednji korak, ovdje ćemo klonirati povučeni element i zahvaljujući unutarnji HTML pokazat ćemo ga asinkrono kad ispustimo element koji smo vukli.
Još jedna stvar na koju moramo obratiti pozornost je prebrisati zadani događaj preglednika, to uspijevamo prilikom stvaranja funkcije ručicaDragNa taj način sprečavamo preglednik da tumači upute na način koji se od nas ne očekuje.
U našem pregledniku to bi trebalo izgledati ovako:

Konačno smo uspjeli napraviti a povuci i ispusti u HTML5 bez ovisnosti o vanjskim knjižnicama, sada uz malo mašte možemo napraviti mnoge funkcionalnosti, poput košarice za kupnju koja radi samo s povuci i ispusti.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod