✅ ХТМЛ5 - Превуците и испустите, други део

Преглед садржаја

Већ у првом делу овог водича видели смо како започети драг догађај повлачења елемената, односно урадили смо део посла, видели смо како да ступимо у интеракцију са различитим догађајима тог првог одељка.
Сада морамо знати како активирати подручје на које ћемо одложити елемент, то је већ комплементарна радња која ће нам омогућити постизање потпуних функционалности на нашој страници.
Креирање подручја депозита
Ово је подручје у којем ћемо оставити елементе које повлачимо, да бисмо манипулисали овим подручјем имаћемо неколико догађаја, како бисмо боље разумели како се носити са тим догађајима, навешћемо сваки од њих и објаснити како то функционише .
Догађаји (уреди)

Драгентер: Активира се када превучени елемент уђе у простор на екрану који смо дефинисали за област одлагања.
Драговер: Покреће се када се превучени елемент помери унутар поља за одлагање које смо већ дефинисали.
Драглеаве: Активира се у тренутку када повучени елемент напусти подручје наслага.
Кап: То је догађај који се активира када ставка остане у пољу за депозит.

Пријем предмета
Једном када сазнамо које догађаје имамо на располагању, изградићемо једноставан код у којем се приликом испуштања или депоновања елемента који смо повукли приказује у области за депоновање.
За ово ћемо користити неке функције унутрашњи ХТМЛ где ћемо клонирати елемент који се баца у подручје.
Погледајмо пример кода:

Пример

Дроп Хере

Ако пажљиво погледамо, дефинисали смо циљни елемент као елемент који ће садржати подручје депозита, када се то уради, дефинисаћемо шта ће се догодити у сваком од догађаја, ако погледамо догађај испуштања где се дешава последњи корак, овде ћемо клонирати повучени елемент и захваљујући унутрашњи ХТМЛ показаћемо га асинхроно када испустимо елемент који смо превлачили.
Још једна ствар на коју морамо обратити пажњу је да препишемо подразумевани догађај прегледача, то управљамо приликом креирања функције хандлеДрагНа овај начин спречавамо прегледач да тумачи упутства на начин који се од нас не очекује.
У нашем прегледачу то би требало да изгледа овако:

Коначно смо успели да направимо а повуци и пусти у ХТМЛ5 без зависности од спољних библиотека, сада уз мало маште можемо направити многе функционалности, попут корпе за куповину која ради само са повуци и пусти.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен