Съдържание
Ефектът плъзгане и пускане Състои се от вземане на елемент от страницата с жест на мишката, обикновено чрез щракване върху него и плъзгане на споменатия елемент в област, където той може да бъде депозиран, след което в зависимост от функционалността на нашата страница ще се случи ново събитие или не.В по -ранни времена това се постигаше с помощта Javascript библиотеки и рамки стил jQuery, тъй като HTML поддръжката беше ограничена, но с HTML5, ние имаме тези функции вече включени в нашия браузър.
Създаване на елементи за плъзгане
В HTML документа трябва да дефинираме елементите, които ще могат да използват този ефект, за това имаме някои свойства, които ще ни помогнат в тази цел.
При поставянето на атрибута плъзгащ се към елемент, който посочваме на браузъра, че този елемент може или не може да бъде плъзнат, за това атрибутът има стойностите true, false и auto, както можем да заключим, true казва на браузъра, че ако трябва да е елемент, който се влачи, false е в противен случай, деактивира ефекта и автоматично казва на браузъра да вземе решение дали да активира самия ефект.
Добра практика е да използвате true или false, за да посочите изрично дали ефектът е активиран или не, защото въпреки че повечето браузъри тълкуват стойността auto като true, не трябва да оставяме хода на нашата страница на трети страни.
Събития с ефект на плъзгане
Преди да преминем към примера, ще дефинираме друга важна характеристика на плъзгане на елемент, това е, че при стартиране на плъзгане на елемент имаме 3 събития, които можем да идентифицираме и с които можем да извършим различни обработки, ако искаме , тези събития са:
плъзгане, е, че началото на събитието за плъзгане възниква, когато поставите мишката върху елемента, щракнете и започнете да плъзгате споменатия елемент.
плъзгане, това се случва след dragstart и продължава по целия път, докато влачим елемента.
dragend, възниква в момента, в който спрем да влачим елемента, независимо дали го оставяме в зоната за депозиране, или сме се покаяли и сме спрели да го влачим наполовина.
Плъзнете внедряването
Нека видим по -долу пример за това как включваме всичко по -горе в страница, ще създадем списък с елементи, на които ще присвоим атрибут за плъзгане като true, ние ще създадем някои css класове, които ще ни позволят да променяме техните стилове и накрая със споменатите събития, когато правим плъзгане на елемент, той ще промени цвета му.
Нека да видим кода:
Пример
Депозит тук
Сега как изглежда в нашия браузър:
