Satura rādītājs
Jau šīs apmācības pirmajā daļā mēs redzējām, kā sākt vilkšanas notikums velkot elementus, tas ir, mēs paveicām daļu darba, mēs redzējām, kā mijiedarboties ar šīs pirmās sadaļas dažādiem notikumiem.Tagad mums ir jāzina, kā aktivizēt apgabalu, kur deponēt elementu, tā jau ir papildu darbība, kas ļaus mums sasniegt pilnīgu funkcionalitāti mūsu lapā.
Depozīta zonas izveide
Šī ir joma, kurā mēs atstāsim vilktos elementus, lai manipulētu ar šo apgabalu, mums būs vairāki notikumi, lai labāk izprastu, kā rīkoties ar šiem notikumiem, mēs uzskaitīsim katru no tiem un paskaidrosim, kā tas darbojas .
Notikumi (rediģēt)
- Dragenter: Tas tiek aktivizēts, kad velkamais elements iekļūst ekrāna vietā, ko esam definējuši depozīta apgabalam.
- Pāreja: Tas tiek aktivizēts, kad velkamais elements pārvietojas mūsu jau definētajā depozīta apgabalā.
- Vilkšana: Tas tiek aktivizēts brīdī, kad ievilktais elements atstāj depozīta zonu.
- Piliens: Tas ir notikums, kas tiek aktivizēts, kad prece tiek atstāta depozīta zonā.
Tiklīdz mēs zinām, kādi notikumi ir mūsu rīcībā, mēs izveidosim vienkāršu kodu, kurā, nometot vai noglabājot ievilkto elementu, tas tiks parādīts depozīta apgabalā.
Šim nolūkam mēs izmantosim dažas funkcijas iekšējais HTML kur mēs klonēsim elementu, kas tiek izmests apgabalā.
Apskatīsim piemēra kodu:
Piemērs
Nometiet šeit
Ja paskatāmies uzmanīgi, mēs definējam mērķa elementu kā elementu, kas saturēs depozīta apgabalu. Kad tas ir izdarīts, mēs definējam, kas notiks katrā no notikumiem, ja aplūkosim izlaišanas pasākums ir vieta, kur notiek pēdējais solis, šeit mēs klonēsim vilkto elementu un, pateicoties iekšējais HTML mēs to parādīsim asinhroni, kad nometīsim vilkto elementu.
Vēl viena lieta, kurai mums jāpievērš uzmanība, ir pārlūka noklusējuma notikuma pārrakstīšana, mēs to pārvaldām, veidojot funkciju handleDragTādā veidā mēs neļaujam pārlūkprogrammai interpretēt norādījumus tā, kā mēs to negaidām.
Mūsu pārlūkprogrammā tam vajadzētu izskatīties šādi:
