Реализовать функцию перетаскивания проще, чем вы думаете. Узнайте, как это сделать, в этом полезном руководстве.

Перетаскивание — это важная функция, которая улучшает взаимодействие с пользователем и обеспечивает удобство работы с ним. Хотите ли вы создать программу для загрузки файлов, сортируемый список или интерактивную игру, понимание того, как использовать возможности этого API, является важнейшим навыком для работы в Интернете. инструментарий разработки.

Основы перетаскивания в HTML

В типичной системе перетаскивания существует два типа элементов: первый тип включает в себя перетаскиваемые элементы, которые пользователи можно перемещать с помощью мыши, а второй тип включает в себя перетаскиваемые элементы, которые обычно указывают, где пользователи могут разместить элемент.

Чтобы реализовать перетаскивание, вы должны сообщить браузеру, какие элементы вы хотите перетаскивать. Чтобы пользователь мог перетаскивать элемент, этот элемент должен иметь перетаскиваемыйHTML-атрибут установлен в истинный, так:

instagram viewer 
<divdraggable="true">This element is draggablediv>

Когда пользователь запускает событие перетаскивания, браузер предоставляет «призрачное» изображение по умолчанию, которое обычно обеспечивает обратную связь относительно перетаскиваемого элемента.

Вы можете настроить это изображение, предоставив вместо него собственное изображение. Для этого выберите перетаскиваемый элемент в DOM, создайте новое изображение, представляющее пользовательское изображение обратной связи, и добавьте перетаскивание перетащите прослушиватель событий следующим образом:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

В приведенном выше блоке кода setDragImage метод имеет три параметра. Первый параметр ссылается на изображение. Остальные параметры представляют собой горизонтальное и вертикальное смещение изображения соответственно. Когда вы запустите код в браузере и начнете перетаскивать элемент, вы заметите, что пользовательское изображение перетаскивания было заменено пользовательским изображением, установленным ранее.

Если вы хотите разрешить отбрасывание, вы должны предотвратить поведение по умолчанию, отменив оба драэнтер и Перетащите над события, например:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Понимание интерфейса DragEvent

JavaScript имеет DragEvent интерфейс, который представляет собой взаимодействие пользователя с помощью перетаскивания. Ниже приведен список возможных типов событий в разделе DragEvent интерфейс.

  • тащить: пользователь запускает это событие при перетаскивании элемента.
  • дракон: это событие возникает, когда операция перетаскивания завершается или когда пользователь прерывает ее. Типичная операция перетаскивания может завершиться отпусканием кнопки мыши или нажатием клавиши Escape.
  • драэнтер: перетаскиваемый элемент вызывает это событие, когда попадает в допустимую цель перетаскивания.
  • драглиф: это событие срабатывает, когда перетаскиваемый элемент покидает цель перетаскивания.
  • Перетащите над: когда пользователь перетаскивает перетаскиваемый элемент на цель перетаскивания, событие срабатывает.
  • перетаскивание: Событие срабатывает в начале операции перетаскивания.
  • уронить: пользователь запускает это событие, когда перетаскивает элемент в цель перетаскивания.

При перетаскивании файла в браузер из среды вне браузера (например, файлового менеджера операционной системы) браузер не запускает перетаскивание или дракон события.

DragEvent может пригодиться, если вы хотите программно отправить пользовательское событие перетаскивания. Например, если вы хотите div чтобы запускать пользовательские события перетаскивания при загрузке страницы, вот как это сделать. Сначала создайте новый кастом ПеретащитеСобытие() так:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

В блоке кода выше customDragStartEvent представляет собой экземпляр ПеретащитеСобытие(). В customDragStartEvent, есть два аргумента конструктора. Первый представляет тип события перетаскивания, который может быть одним из семи типов событий, упомянутых ранее.

Второй аргумент — это объект с Обмен данными ключ, представляющий экземпляр Обмен данными, о котором вы узнаете больше позже в этом руководстве. Затем возьмите элемент, из которого вы хотите вызвать событие, из Объектная модель документа (DOM).

const draggableElement = document.querySelector("#draggable");

Затем добавьте прослушиватели событий следующим образом:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

В первом прослушивателе событий выше функция обратного вызова записывает текст «Перетаскивание началось!» и вызывает setData метод на Обмен данными недвижимость на событие объект. Теперь вы можете запускать пользовательские события следующим образом:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Передача данных с помощью dataTransfer

Обмен данными Объект служит мостом между исходным элементом (перетаскиваемым элементом) и целевым элементом (перетаскиваемой областью) во время операции перетаскивания. Он действует как контейнер временного хранения данных, которыми вы хотите поделиться между этими элементами.

Эти данные могут принимать различные формы, такие как текст, URL-адреса или пользовательские типы данных, что делает их универсальным инструментом для реализации широкого спектра функций перетаскивания.

Использование setData() для упаковки данных

Чтобы перенести данные из перетаскиваемого элемента в удаляемый, вы будете использовать установитьДанные() метод, предусмотренный Обмен данными объект. Этот метод позволяет вам упаковать данные, которые вы хотите передать, и указать тип данных. Вот базовый пример:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Когда пользователь начинает перетаскивать указанный элемент, установитьДанные() упаковывает текст «Привет, мир!» с типом данных текстовый/обычный. Эти данные теперь связаны с событием перетаскивания и могут быть доступны для перетаскиваемой цели во время операции перетаскивания.

Получение данных с помощью getData()

На принимающей стороне, в прослушивателе событий удаляемого элемента, вы можете получить переданные данные, используя метод получить данные() метод:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Приведенный выше блок кода извлекает данные того же типа (текстовый/обычный), который был установлен с помощью установитьДанные() метод ранее. Это позволяет вам получать доступ к переданным данным и манипулировать ими по мере необходимости в контексте удаляемого элемента.

Варианты использования интерфейсов перетаскивания

Интеграция функции перетаскивания в ваши веб-приложения может стать мощным усовершенствованием, но важно понимать, когда и почему вам следует ее реализовать.

  • Загрузчики файлов: разрешение пользователям перетаскивать файлы непосредственно со своего рабочего стола или файлового менеджера в назначенную область размещения упрощает процесс загрузки.
  • Сортируемые списки: Если ваше приложение включает в себя списки элементов, например списки задач, плейлисты или галереи изображений, пользователи могут оценить возможность изменять порядок элементов с помощью перетаскивания.
  • Интерактивные информационные панели: Для инструменты визуализации данных и отчетности, перетаскивание может стать для пользователей мощным способом настройки своих информационных панелей путем перестановки виджетов и диаграмм.

Помня о доступности

Хотя перетаскивание может быть визуально привлекательным и улучшить взаимодействие с пользователем, крайне важно обеспечить, чтобы ваша реализация оставалась доступной для всех пользователей, включая людей с ограниченными возможностями. Предоставьте альтернативные методы взаимодействия, например управление с клавиатуры, чтобы сделать ваше приложение инклюзивным.