API HTML5 для перетаскивания (DnD) означает, что практически любой элемент на странице может стать перетаскиваемым. В этой статье мы рассмотрим основы метода drag and drop.
Создавайте перетаскиваемый контент
Стоит отметить, что в большинстве браузеров выбор текста, изображения и ссылки по умолчанию можно перетаскивать. Например, если перетащить логотип Google в поиске Google, вы увидите призрачное изображение. Затем изображение можно перетащить и вставить в адресную строку <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. В следующем примере столбцы могут быть перетащены или нацелены. Чтобы помочь пользователям понять это: когда пользователь перетаскивает элемент мимо столбца, граница этого столбца становится пунктирной линией. Например, вы можете создать класс over в CSS, который представляет элемент, являющийся целевой для размещения:
Затем настройте обработчик событий в JavaScript, который добавляет класс over при перетаскивании столбца и удаляет его при выходе. В обработчике драгендов мы также хотим убедиться, что класс убирается в конце драга.
В этом коде стоит упомянуть несколько моментов:
При перетаскивании элемента, например ссылки, нужно заблокировать поведение браузера по умолчанию — перейти к этой ссылке. Для этого вызовите e.preventDefault() в событии dragover. Ещё одна хорошая практика — возвращать false в том же обработчике.
Используйте обработчик событий dragenter для переключения классов, а не dragover. Если использовать перетягивание, класс CSS переключается несколько раз, потому что событие-драговер продолжает срабатывать, когда столбец зависает. В конечном итоге это заставит рендерер браузера выполнять много ненужной работы. Лучше всегда сводить перерисовку к минимуму. Если по какой-то причине нужно использовать события dragover, подумайте о ограничении или удалении слушателей событий.
Завершить размещение
Чтобы справиться с фактическим размещением, добавьте слушателя события для дропа. В дроп-обработчике нужно заблокировать стандартное поведение браузера при размещении, что обычно является каким-то раздражающим перенаправлением. e.stopPropagation() может быть вызван, чтобы предотвратить срабатывание DOM событием.
Обязательно зарегистрируйте нового хендлера в другом хендлере:
Если вы запустите код в этот момент, проект не будет размещён в новом месте. Для этого необходимо использовать объект DataTransfer.
Свойство dataTransfer — это место, где происходят все чудеса DnD. Он сохраняет фрагменты данных, отправленные при операции перетаскивания. dataTransfer устанавливается в событии dragstart и читается/обрабатывается в событии drop. Вызовите e.dataTransfer.setData(mimeType, dataPayload) для установки типа MIME и полезной нагрузки объекта.
В следующем примере мы позволим пользователям менять порядок столбцов. Для этого сначала нужно сохранить HTML исходного элемента в начале перетаскивания:
Обработайте размещение столбца в событии drop, установите HTML исходного столбца на HTML целевого столбца, где он расположен, сначала проверьте, что целевой столбец, который пользователь перетащил и вытащил, совпадает с исходным столбцом.
Дополнительные свойства сопротивления
Объект dataTransfer отображает свойства, которые используются для визуальной обратной связи пользователю во время процесса перетаскивания. Эти свойства также могут использоваться для контроля того, как каждая цель размещения реагирует на определённые типы данных.
- dataTransfer.effectAllowed ограничивает «тип перетаскивания», который пользователь может выполнить на элементе. Он используется в модели обработки перетаскивания для инициализации dropEffect во время событий перетаскивания и перетягивания. Это свойство можно установить на следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
- dataTransfer.dropEffect управляет обратной связью, предоставляемой пользователю во время событий dragenter и dragover. Когда пользователь наводит курсор на целевой элемент, курсор браузера указывает тип действия, которое нужно выполнить (например, копирование, перемещение и т.д.). Эффект может быть одним из следующих значений: none, copy, link, move.
- 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
|
