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