Как использовать 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События.

Как только мы войдем всбросить цель:

1. вdragenterсобытие запускается для цели перетаскивания
2. в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или жеdragoverevent на одно из этих строковых значений:

• noneэто не должно быть сброшено
• moveего можно переместить
• copyэто можно скопировать
• linkэто может быть связано

Пример:

element.addEventListener('dragenter', event => {
  event.dataTrasfer.dropEffect = 'move'
})

Передаваемые данные

Вы можете получить доступ к перемещаемым элементам изdataTransfer.itemsсвойство, которое представляет собой объект, подобный массиву, который вы можете перебирать с помощью цикла и получать доступ к каждомуDataTransferItemобъект.

DataTransferItemимеет 2 свойства только для чтения:

• kind: вид перетаскиваемого объекта. Возвращает строку, содержащуюfileили жеstring
• typeMIME-тип элемента

и у него есть 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.