Узнайте, как использовать API перетаскивания для создания интерактивных возможностей для ваших пользователей.
Используя API перетаскивания, вы можете определить, какие элементы на странице можно перетаскивать и перехватывать, когда пользователь перетаскивает элемент.
Это очень хорошо поддерживается современными браузерами:
Прежде чем мы начнем изучать API, мы должны знать, как определить, какие элементы на страницеперетаскиваемый. Мы можем сделать это, добавивdraggable
в HTML-коде страницы со значениемtrue
:
<div draggable="true">
...
</div>
Этого достаточно, чтобы элемент можно было перетаскивать.
Совет: изображения, выделенный текст и ссылки можно перетаскивать по умолчанию, если вы не установите
draggable
обмануть их
Мы также можем перетаскивать файлы с пользовательского компьютера внутрь браузера. В этом случае мы передаемфайлы.
Куда мы можем перетаскивать элементы - это еще один момент, который нам нужно уточнить. Мы не можем просто перетащить любой элемент, мы также не можем просто перетащить любой элемент. Элемент должен быть действительнымсбросить цель.
Чтобы сделать элемент целью перетаскивания, вы слушаете егоdragover
событие, и вы либо возвращаете из него false, либо вызываетеpreventDefault()
о прошедшем мероприятии:
const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
event.preventDefault()
})
Как только мы это сделаем, у нас будет перетаскиваемый элемент и цель перетаскивания, и мы можем начать. События, с которыми мы можем взаимодействовать с перетаскиваемым элементом:
dragstart
drag
dragend
На цели падения:
dragenter
dragover
dragleave
drop
Обзор операции перетаскивания и запущенных событий
Когда пользователь начинает перетаскиватьперетаскиваемый элемент, щелкнув по нему мышью и переместив мышь, или также нажав и удерживая нажатой кнопку, а затем переместив выделение,dragstart
на нем запускается событие:
element.addEventListener('dragstart', event => {
//...
})
Вevent
объект, переданный в качестве параметра функции обработки событий, являетсяDragEvent
объект.
Он простирается от более общегоОбъект события, используется совместно со всеми другими событиями: мышью, клавиатурой, прокруткой и т. д.
В этот момент элемент перетаскивается, аdrag
событие запущено. Несколько раз, когда элемент перетаскивается, поэтому мы должны использовать регулирование, как дляscroll
или жеmouseover
События.
Как только мы войдем всбросить цель:
- в
dragenter
событие запускается для цели перетаскивания - в
dragover
событие запускается для цели перетаскивания
Если перетаскиваемый элемент сначала попадает в цель перетаскивания, а затем удаляется от нее,dragleave
событие запускается для цели перетаскивания.
Если пользователь отпускает мышь,dragend
событие запускается для элемента, который перетаскивается, иdrop
событие запускается для цели перетаскивания.
Перетаскивание данных:DataTransfer
Каждое событие, связанное с перетаскиванием, происходит какDragEvent
как я уже упоминал, и у него есть свойство, называемоеdataTransfer
который содержит перетаскиваемые данные и предлагает 5 свойств:
dropEffect
effectAllowed
files
items
(только чтение)types
(только чтение)
Когда начинается событие перетаскивания, вы можете выполнить несколько операций.
Установить / получить эффект
Вы можете установить желаемый эффект операции перетаскивания, установивeffectAllowed
собственность вdragstart
мероприятие. У вас есть несколько параметров, которые определяют, как цель перетаскивания должна обрабатывать перетаскиваемый элемент:
none
это не должно быть сброшеноmove
его можно переместитьcopy
это можно скопироватьlink
это может быть связаноcopyMove
его можно скопировать или переместитьcopyLink
его можно скопировать или связатьlinkMove
его можно переместить или связатьall
его можно скопировать, переместить или связать
(все струны).
По умолчаниюall
.
ВdropEffect
Свойство используется для получения типа операции перетаскивания, который на этот раз устанавливается пользователем с помощью клавиш-модификаторов. Например, на Mac нажатие кнопкиAlt
клавиша устанавливает цель перетаскивания для копирования элемента вместо его перемещения.
Это свойство не только для чтения. Мы можем отредактировать его вdragenter
или жеdragover
event на одно из этих строковых значений:
none
это не должно быть сброшеноmove
его можно переместитьcopy
это можно скопироватьlink
это может быть связано
Пример:
element.addEventListener('dragenter', event => {
event.dataTrasfer.dropEffect = 'move'
})
Передаваемые данные
Вы можете получить доступ к перемещаемым элементам изdataTransfer.items
свойство, которое представляет собой объект, подобный массиву, который вы можете перебирать с помощью цикла и получать доступ к каждомуDataTransferItem
объект.
DataTransferItem
имеет 2 свойства только для чтения:
kind
: вид перетаскиваемого объекта. Возвращает строку, содержащуюfile
или жеstring
type
MIME-тип элемента
и у него есть 2 метода:
getAsFile()
возвращаетFile
объект, представляющий перетаскиваемые данныеgetAsString()
выполняет функцию обратного вызова, сопоставляя строковый объект, представляющий перетаскиваемые данные
У них похожее название, но они работают по-разному. Первый возвращаетFile
объект:
element.addEventListener('dragenter', event => {
for (item of event.dataTrasfer.items) {
const theFile = item.getAsFile()
}
})
Узнайте больше об объектах File наhttps://flaviocopes.com/file/
Второй передает элемент в виде строки функции обратного вызова:
element.addEventListener('dragenter', event => {
for (item of event.dataTrasfer.items) {
item.getAsString(theString => {
console.log(theString)
})
}
})
Типы перетаскиваемых файлов элементов хранятся вtypes
собственностьdataTransfer
объект. Это массив, содержащий строкуstring
по умолчанию. Если мы перетаскиваем файл, соответствующий тип - это строка значенийFiles
.
Если есть файлы, которые передаются, помимо перечисленных вdataTransfer.items
, они хранятся вfiles
собственностьюdataTransfer
.
Это свойство указывает наFileList
объект, содержащий список перетаскиваемых файлов.
Посмотрите эту демонстрацию на Codepen:
См. ПероПеретащите и отпустите!Автор: Флавио Коупс (@flaviocopes) наCodePen.
Tech Wiki Online!