HTML5 drag-and-drop (DnD) API означава, че почти всеки елемент на страница може да стане плъзгаем. В тази статия ще разгледаме основите на drag and drop.
Създаване на влачено съдържание
Струва си да се отбележи, че в повечето браузъри текстовите селекции, изображения и връзки по подразбиране могат да се влачат. Например, ако плъзнете логото на Google в Google Search, ще видите призрачно изображение. След това изображението може да се плъзне и пусне в адресната лента, <input type="file" /> елемент, или дори на работния плот. За да направите другите видове съдържание влачещи, трябва да използвате HTML5 DnD API.
За да направите обект плъзгаем, задайте елементаdraggable=true。 Плъзгането може да се поддържа за почти всеки елемент, включително изображения, файлове, връзки, файлове или всякаква маркировка на страница.
В нашия пример ще създадем интерфейс за пренареждане на някои колони, които са подредени чрез CSS Grid. Основната маркировка за тези колони е показана по-долу, като влаченото свойство е зададено на true за всяка колона.
Ето CSS за моите контейнерни и кутии елементи. Обърнете внимание, че единственият CSS, свързан с функционалността на DnD, е свойството курсор: move. Останалата част от кода контролира само оформлението и стила на елементите на контейнера и кутията.
В този момент ще видите, че можете да плъзгате предмета, но нищо друго няма да се случи. За да добавим функционалност на DnD, трябва да използваме JavaScript API.
Слушайте за драг събития
Могат да се прикачат различни събития, за да се наблюдава целия процес на плъзгане и пускане.
- Dragstart
- влача
- Драгентър
- Dragleave
- Драговър
- капка
- драгенд
За да обработиш DnD поток, ти трябва някакъв източник (началната точка на драга), данните (това, което се опитваш да поставиш) и целта (зоната, където е поставено snap). Изходните елементи могат да бъдат изображения, списъци, връзки, файлови обекти, HTML блокове и др. Целта е да се приеме зоната за пускане (или набор от зони за пускане) на данните, които потребителят се опитва да постави. Имайте предвид, че не всички елементи могат да бъдат цели, например изображенията не могат да бъдат цели.
Започва и завършва последователността с плъзгане и пускане
След като дефинирате свойството draggable="true" върху съдържанието, прикачете обработчик за събития за dragstart, за да стартирате DnD последователността за всяка колона.
Този код ще задава непрозрачността на колоната на 40%, когато потребителят започне да влаче, а след това ще я върне на 100% в края на събитието.
Резултатите могат да се видят в демото на Glitch по-долу. Плъзнете предмет и той ще стане непрозрачен. Тъй като събитието dragstart таргетира изходния елемент, задаването на this.style.opacity на 40% дава на потребителя визуална обратна връзка, че текущият избран елемент се движи. След като елементът бъде поставен, изходният елемент се връща към 100% непрозрачност, въпреки че функцията за поставяне все още не е записана.
Използвайте dragenter, dragover и dragleave, за да добавите допълнителни визуални подсказки
За да помогнете на потребителите да разберат как да взаимодействат с вашия интерфейс, използвайте dragenter, dragover и dragleave обработвачи на събития. В следващия пример колоните могат да бъдат плъзгани или насочвани. За да помогнем на потребителите да разберат това, когато потребителят плъзне елемент покрай колона, границата на тази колона става пунктирана линия. Например, можеш да създадеш overclass в CSS, който да представя елемент, който е цел за поставяне:
След това настройте обработвач на събития в JavaScript, който да добавя over класа при плъзгане покрай колона и да го премахва при излизане. В dragend handler също искаме да сме сигурни, че класът се премахва в края на drag-а.
В този код има няколко точки, които трябва да се споменат:
Когато плъзгате елемент като линк, трябва да блокирате стандартното поведение на браузъра, а именно навигацията към този линк. За да го направите, извикайте e.preventDefault() в събитието dragover. Друга добра практика е да върнете false в същия оператор.
Използвай dragenter event handler за превключване на класове, а не dragover. Ако използваш dragover, CSS класът се включва няколко пъти, защото събитието продължава да се задейства, когато колоната се движи. В крайна сметка това ще накара рендерера на браузъра да върши много ненужна работа. Най-добре е винаги да прерисувате до минимум. Ако по някаква причина трябва да използвате dragover събития, помислете да ограничите или премахнете слушателите на събитията.
Завършете разпределението
За да се справите с самото разположение, добавете слушател на събитието за дроп. В drop handler трябва да блокирате стандартното поведение на браузъра за разположение, което обикновено е някакъв досаден пренасочване. e.stopPropagation() може да се извика, за да се предотврати задействането на DOM.
Уверете се, че новият оператор е регистриран в другия оператор:
Ако пуснете кода в този момент, проектът няма да бъде поставен на ново място. За да постигнете това, трябва да използвате обект DataTransfer.
Свойството dataTransfer е мястото, където се случват всички чудеса на DnD. Той запазва фрагментите от данни, изпратени при операцията за изтегляне. dataTransfer се задава в събитието dragstart и се чете/обработва в събитието drop. Извикайте e.dataTransfer.setData(mimeType, dataPayload), за да зададете MIME типа и полезния товар на обекта.
В следващия пример ще позволим на потребителите да променят реда на колоните. За да го направите, първо трябва да съхраните HTML-а на изходния елемент в началото на плъзгането:
Обработете позиционирането на колоната в събитието drop, задайте HTML-а на изходната колона на HTML-а на целевата колона, където е поставена, първо проверете дали целевата колона, която потребителят е плъзгал и пуснал, е същата като изходната колона.
Повече свойства на съпротивление
Обектът dataTransfer показва свойства, които се използват за предоставяне на визуална обратна връзка на потребителя по време на процеса на влачене. Тези свойства могат да се използват и за контрол на това как всяка целева цел реагира на конкретни типове данни.
- dataTransfer.effectAllowed ограничава "типа дърпане", което потребителят може да извърши върху елемент. Използва се в модела за обработка на плъзгане и пускане за инициализиране на dropEffect по време на събития с dragenter и dragover. Това свойство може да бъде зададено на следните стойности: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
- dataTransfer.dropEffect контролира обратната връзка, предоставяна на потребителя по време на dragenter и dragover събития. Когато потребителят задържи курсора върху целевия елемент, курсорът на браузъра ще покаже типа действие, което трябва да се извърши (например копиране, преместване и др.). Ефектът може да бъде една от следните стойности: няма, копирай, свързвай, премествай.
- e.dataTransfer.setDragImage(imgElement, x, y) показва, че стандартната обратна връзка "ghost image" в браузъра не се използва, а вместо това има опция за задаване на иконата за плъзгане.
Качвайте файлове чрез плъзгане и пускане
Следващият прост пример използва колона като източник на изтегляне и цел. Това може да се види в потребителския интерфейс, когато потребителят е помолен да пренареди елементите. В някои случаи плъзгането на целта и изходния източник може да е различно, например при интерфейс, където потребителят трябва да избере изображение като основно изображение на продукта, като го плъзне върху целевия обект.
Drag and drop често се използва, за да позволи на потребителите да влачат елементи от работния плот в приложението. Основната разлика е в дроп хендлера. Без да се използва dataTransfer.getData() за достъп до файла, данните на файла ще бъдат включени в свойството dataTransfer.files:
Оригинален линк:Входът към хиперлинк е видим.
|
Публикувано на 26.04.2022 10:30:50
|
|
|
|
Публикувано на 26.04.2022 21:27:25
|
