Какое свойство существует у dragevent

DragEvent

Интерфейс DragEvent представляет собой интерфейс DOM event , представляющий взаимодействие перетаскивания. Пользователь инициирует перетаскивание, поместив указательное устройство (например, мышь) на сенсорную поверхность, а затем перетащив указатель в новое место (например, в другое приложение DOM element)., которое может интерпретировать взаимодействие перетаскивания в зависимости от приложения).

Этот интерфейс наследует свойства от MouseEvent и Event .

Instance properties

Данные, которые передаются во время взаимодействия перетаскивания.

Constructors

Хотя этот интерфейс имеет конструктор, создать полезный объект DataTransfer из сценария невозможно, поскольку объекты DataTransfer имеют модель обработки и безопасности, которая координируется браузером во время перетаскивания.

Создает синтетический и ненадежный DragEvent.

Event types

Это событие запускается при перетаскивании элемента или выделения текста.

Это событие запускается при завершении операции перетаскивания (при отпускании кнопки мыши или нажатии клавиши выхода key).).

Это событие запускается, когда перетаскиваемый элемент или выделенный текст попадает в допустимую цель перетаскивания.

Это событие запускается, когда перетаскиваемый элемент или выделенный текст покидают допустимую цель перетаскивания.

Это событие срабатывает непрерывно, когда элемент или выделение текста перетаскиваются, а указатель мыши находится над действительной целью перетаскивания (каждые 50 мс мышь WHEN не перемещается ELSE намного быстрее между 5 мс (медленное движение) и 1 мс (быстрое движение) примерно. Этот шаблон срабатывания отличается от mouseover ).

Это событие запускается, когда пользователь начинает перетаскивать элемент или выделенный текст.

Это событие запускается, когда выделенный элемент или текст перетаскивается на допустимую цель перетаскивания.

Example

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

Specifications

Specification
HTML Стандартный # интерфейс dragevent

Browser compatibility

Desktop	Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Фаерфокс для Android	Opera Android	Сафари на IOS	Samsung Internet
DragEvent	46	12	3.5	No	12	3.1	No	No	4	No	No	No
DragEvent	3	12	3.5	9 До Internet Explorer 10 DragEvent выставлялся в стандартном режиме, но не в режиме совместимости.	12	3.1	No	No	4	No	No	No
dataTransfer	46	12	3.5	10 Значение всегда null .	33	3.1	No	No	4	No	No	No

See also

• Перетащите
• Drag Operations
• Рекомендуемые типы перетаскивания
• Тест DataTransfer — вставка или перетаскивание

DragEvent

The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

This interface inherits properties from MouseEvent and Event .

Instance properties

DragEvent.dataTransfer Read only The data that is transferred during a drag and drop interaction.

Constructors

Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops. DragEvent() Creates a synthetic and untrusted DragEvent.

Event types

drag This event is fired when an element or text selection is being dragged. dragend This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter This event is fired when a dragged element or text selection enters a valid drop target. dragleave This event is fired when a dragged element or text selection leaves a valid drop target. dragover This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than mouseover ). dragstart This event is fired when the user starts dragging an element or text selection. drop This event is fired when an element or text selection is dropped on a valid drop target.

Example

An Example of each property, constructor, event type and global event handlers is included in their respective reference page.

Specifications

Specification
HTML Standard # the-dragevent-interface

Browser compatibility

BCD tables only load in the browser

See also

• Drag and drop
• Drag Operations
• Recommended Drag Types
• DataTransfer test — Paste or Drag

Drag’n’Drop с событиями мыши

Drag’n’Drop – отличный способ улучшить интерфейс. Захват элемента мышкой и его перенос визуально упростят что угодно: от копирования и перемещения документов (как в файловых менеджерах) до оформления заказа («положить в корзину»).

В современном стандарте HTML5 есть раздел о Drag and Drop – и там есть специальные события именно для Drag’n’Drop переноса, такие как dragstart , dragend и так далее.

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

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

Здесь мы будем рассматривать Drag’n’Drop при помощи событий мыши.

Алгоритм Drag’n’Drop

Базовый алгоритм Drag’n’Drop выглядит так:

1. При mousedown – готовим элемент к перемещению, если необходимо (например, создаём его копию).
2. Затем при mousemove передвигаем элемент на новые координаты путём смены left/top и position:absolute .
3. При mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.

Это и есть основа Drag’n’Drop. Позже мы сможем расширить этот алгоритм, например, подсветив элементы при наведении на них мыши.

В следующем примере эти шаги реализованы для переноса мяча:

ball.onmousedown = function(event) < // (1) отследить нажатие // (2) подготовить к перемещению: // разместить поверх остального содержимого и в абсолютных координатах ball.style.position = 'absolute'; ball.style.zIndex = 1000; // переместим в body, чтобы мяч был точно не внутри position:relative document.body.append(ball); // и установим абсолютно спозиционированный мяч под курсор moveAt(event.pageX, event.pageY); // передвинуть мяч под координаты курсора // и сдвинуть на половину ширины/высоты для центрирования function moveAt(pageX, pageY) < ball.style.left = pageX - ball.offsetWidth / 2 + 'px'; ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; >function onMouseMove(event) < moveAt(event.pageX, event.pageY); >// (3) перемещать по экрану document.addEventListener('mousemove', onMouseMove); // (4) положить мяч, удалить более ненужные обработчики событий ball.onmouseup = function() < document.removeEventListener('mousemove', onMouseMove); ball.onmouseup = null; >; >;

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

Это можно увидеть в действии:

Попробуйте перенести мяч мышкой и вы увидите описанное поведение.

Всё потому, что браузер имеет свой собственный Drag’n’Drop, который автоматически запускается и вступает в конфликт с нашим. Это происходит именно для картинок и некоторых других элементов.

Его нужно отключить:

ball.ondragstart = function() < return false; >;

Теперь всё будет в порядке.

Ещё одна деталь – событие mousemove отслеживается на document , а не на ball . С первого взгляда кажется, что мышь всегда над мячом и обработчик mousemove можно повесить на сам мяч, а не на документ.

Но, как мы помним, событие mousemove возникает хоть и часто, но не для каждого пикселя. Поэтому из-за быстрого движения указатель может спрыгнуть с мяча и оказаться где-нибудь в середине документа (или даже за пределами окна).

Вот почему мы должны отслеживать mousemove на всём document , чтобы поймать его.

Правильное позиционирование

В примерах выше мяч позиционируется так, что его центр оказывается под указателем мыши:

ball.style.left = pageX - ball.offsetWidth / 2 + 'px'; ball.style.top = pageY - ball.offsetHeight / 2 + 'px';

Неплохо, но есть побочные эффекты. Мы, для начала переноса, можем нажать мышью на любом месте мяча. Если мячик «взят» за самый край – то в начале переноса он резко «прыгает», центрируясь под указателем мыши.

Было бы лучше, если бы изначальный сдвиг курсора относительно элемента сохранялся.

Где захватили, за ту «часть элемента» и переносим:

Обновим наш алгоритм:

Когда человек нажимает на мячик ( mousedown ) – запомним расстояние от курсора до левого верхнего угла шара в переменных shiftX/shiftY . Далее будем удерживать это расстояние при перетаскивании. Чтобы получить этот сдвиг, мы можем вычесть координаты:

// onmousedown let shiftX = event.clientX - ball.getBoundingClientRect().left; let shiftY = event.clientY - ball.getBoundingClientRect().top;

// onmousemove // ball has position:absoute ball.style.left = event.pageX - shiftX + 'px'; ball.style.top = event.pageY - shiftY + 'px';

Итоговый код с правильным позиционированием:

ball.onmousedown = function(event) < let shiftX = event.clientX - ball.getBoundingClientRect().left; let shiftY = event.clientY - ball.getBoundingClientRect().top; ball.style.position = 'absolute'; ball.style.zIndex = 1000; document.body.append(ball); moveAt(event.pageX, event.pageY); // переносит мяч на координаты (pageX, pageY), // дополнительно учитывая изначальный сдвиг относительно указателя мыши function moveAt(pageX, pageY) < ball.style.left = pageX - shiftX + 'px'; ball.style.top = pageY - shiftY + 'px'; >function onMouseMove(event) < moveAt(event.pageX, event.pageY); >// передвигаем мяч при событии mousemove document.addEventListener('mousemove', onMouseMove); // отпустить мяч, удалить ненужные обработчики ball.onmouseup = function() < document.removeEventListener('mousemove', onMouseMove); ball.onmouseup = null; >; >; ball.ondragstart = function() < return false; >;

В действии (внутри ифрейма):

Различие особенно заметно, если захватить мяч за правый нижний угол. В предыдущем примере мячик «прыгнет» серединой под курсор, в этом – будет плавно переноситься с текущей позиции.

Цели переноса (droppable)

В предыдущих примерах мяч можно было бросить просто где угодно в пределах окна. В реальности мы обычно берём один элемент и перетаскиваем в другой. Например, «файл» в «папку» или что-то ещё.

Абстрактно говоря, мы берём перетаскиваемый (draggable) элемент и помещаем его в другой элемент «цель переноса» (droppable).

Нам нужно знать:

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

Решение довольно интересное и немного хитрое, давайте рассмотрим его.

Какой может быть первая мысль? Возможно, установить обработчики событий mouseover/mouseup на элемент – потенциальную цель переноса?

Но это не работает.

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

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

То же самое с перетаскиваемым элементом. Мяч всегда находится поверх других элементов, поэтому события срабатывают на нём. Какие бы обработчики мы ни ставили на нижние элементы, они не будут выполнены.

Вот почему первоначальная идея поставить обработчики на потенциальные цели переноса нереализуема. Обработчики не сработают.

Так что же делать?

Существует метод document.elementFromPoint(clientX, clientY) . Он возвращает наиболее глубоко вложенный элемент по заданным координатам окна (или null , если указанные координаты находятся за пределами окна).

Мы можем использовать его, чтобы из любого обработчика событий мыши выяснить, над какой мы потенциальной целью переноса, вот так:

// внутри обработчика события мыши ball.hidden = true; // (*) прячем переносимый элемент let elemBelow = document.elementFromPoint(event.clientX, event.clientY); // elemBelow - элемент под мячом (возможная цель переноса) ball.hidden = false;

Заметим, нам нужно спрятать мяч перед вызовом функции (*) . В противном случае по этим координатам мы будем получать мяч, ведь это и есть элемент непосредственно под указателем: elemBelow=ball . Так что мы прячем его и тут же показываем обратно.

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

Расширенный код onMouseMove с поиском потенциальных целей переноса:

// потенциальная цель переноса, над которой мы пролетаем прямо сейчас let currentDroppable = null; function onMouseMove(event) < moveAt(event.pageX, event.pageY); ball.hidden = true; let elemBelow = document.elementFromPoint(event.clientX, event.clientY); ball.hidden = false; // событие mousemove может произойти и когда указатель за пределами окна // (мяч перетащили за пределы экрана) // если clientX/clientY за пределами окна, elementFromPoint вернёт null if (!elemBelow) return; // потенциальные цели переноса помечены классом droppable (может быть и другая логика) let droppableBelow = elemBelow.closest('.droppable'); if (currentDroppable != droppableBelow) < // мы либо залетаем на цель, либо улетаем из неё // внимание: оба значения могут быть null // currentDroppable=null, // если мы были не над droppable до этого события (например, над пустым пространством) // droppableBelow=null, // если мы не над droppable именно сейчас, во время этого события if (currentDroppable) < // логика обработки процесса "вылета" из droppable (удаляем подсветку) leaveDroppable(currentDroppable); >currentDroppable = droppableBelow; if (currentDroppable) < // логика обработки процесса, когда мы "влетаем" в элемент droppable enterDroppable(currentDroppable); >> >

В приведённом ниже примере, когда мяч перетаскивается через футбольные ворота, ворота подсвечиваются.

HTML Drag and Drop API

Интерфейс HTML Drag and Drop позволяет приложениям использовать функционал перетаскивания в браузерах. Пользователь может выбрать перетаскиваемые элементы мышью, перетащить к элементу сброса и бросить их, отпустив кнопку мыши. Во время переноса за указателем следует полупрозрачный образ перетаскиваемого элемента

При создании веб-сайтов, расширений и XUL-приложений можно настраивать, какие именно элементы можно перетаскивать, какую обратную связь они при этом будут создавать, и какие элементы будут создавать область сброса.

Данный обзор HTML Drag and Drop включает описание интерфейса, основные шаги по добавлению поддержки данного функционала в приложение, а также краткие данные о поддержке.

События перетаскивания

HTML drag-and-drop использует модель событий DOM и события перетаскивания (en-US) унаследованные от событий мыши . Обычно операция перетаскивания начинается, когда пользователь выбирает перетаскиваемый элемент, перемещает его в зону элемента сброса, после чего отпускает.

В ходе операции перетаскивания происходит несколько типов событий, а события drag (en-US) и dragover (en-US) могут вызываться множество раз.

Событие	Обработчик события	Запускается, когда…
drag (en-US)	ondrag (en-US)	…длится перетаскивание элемента или выделения текста.
dragend (en-US)	ondragend (en-US)	…завершается перетаскивание (например, отпускается кнопка мыши или нажимается Escape; подробнее в Завершение перетаскивания.)
dragenter (en-US)	ondragenter (en-US)	…перетаскиваемый элемент попадает в допустимую цель сброса (Подробнее в Указание целей сброса.)
dragexit	ondragexit (en-US)	…элемент больше не является целью операции перетаскивания.
dragleave (en-US)	ondragleave (en-US)	…перетаскиваемый элемент покидает допустимую цель сброса.
dragover (en-US)	ondragover (en-US)	…элемент перетаскивается над допустимой целью сброса каждые несколько сотен миллисекунд
dragstart	ondragstart	…пользователь начал перетаскивать элемент. (Подробнее в Начало операции перетаскивания.)
drop (en-US)	ondrop (en-US)	…элемент сброшен в допустимую зону сброса. (Подробнее в Выполнение сброса.)

Примечание: При перемещении файла из операционной системы в браузер ни событие dragstart , ни dragend не вызывается.

Интерфейсы

Объекты DataTransfer включают состояние события, такое как тип выполненного перетаскивания (вроде copy или move ), данные перетаскивания (один или более элементов) и MIME-тип каждого элемента перетаскивания. Объекты DataTransfer также имеют методы добавления или удаления элементов из данных о перетасивании.

Для добавления в приложение поддержки HTML Drag and Drop, следует использовать только интерфейсы DragEvent (en-US) и DataTransfer . (Firefox поддерживает некоторые Специфичные для Gecko расширения объекта DataTransfer , но они будут работать только в Firefox.)

Каждый объект DataTransfer содержит свойство items (en-US), являющееся списком (en-US) объектов DataTransferItem (en-US). Объект DataTransferItem (en-US) представляет собой отдельный перетаскиваемый элемент, каждый со свойством kind (en-US) (либо string либо file ) и свойство type (en-US) для MIME-типа данных элемента. Объект DataTransferItem (en-US) также имеет методы для получения данных о перемещаемых элементах.

Объект DataTransferItemList (en-US) содержит список объектов DataTransferItem (en-US). Он имеет методы для добавления перетаскиваемых объектов в список, их удаления, и очистки списка.

Ключевое отличие интерфейсов DataTransfer и DataTransferItem (en-US) заключается в том, что первый использует синхронный метод доступа к данным о перетаскиваемых объектах getData() (en-US), а второй – асинхронный метод getAsString() (en-US).

Примечание: DragEvent (en-US) и DataTransfer широко поддерживаются десктопными браузерами. Однако, поддержка интерфейсов DataTransferItem (en-US) и DataTransferItemList (en-US) достаточно ограниченная. Более подробно можно узнать в разделе Поддержка .

Специфичные для Gecko интерфейсы

Mozilla и Firefox поддерживают некоторые функции, которых нет в стандартной drag-and-drop модели. Это удобные функции, помогающие перетаскивать несколько элементов или нестроковых данных (например, файлов). Для получения дополнительной информации смотрите Перетаскивание и Сброс нескольких элементов. Дополнительно посмотрите DataTransfer страницу справочника со всеми специфичными для Gecko свойствами и методами.

Основы

В данном разделе кратко описаны основные шаги добавления в приложение функционала drag-and-drop.

Обозначьте, что можно перетаскивать

Чтобы сделать элемент перетаскиваемым, к нему нужно добавить атрибут draggable и глобальный обработчик события ondragstart . Пример показан в коде ниже:

script> function dragstart_handler(ev)  // Добавить id целевого элемента в объект передачи данных ev.dataTransfer.setData("text/plain", ev.target.id); > window.addEventListener("DOMContentLoaded", () =>  // Найти элемент по id const element = document.getElementById("p1"); // Добавить обработчик события `dragstart` element.addEventListener("dragstart", dragstart_handler); >); script> p id="p1" draggable="true">Данный элемент является перетаскиваемым.p> 

Для получения дополнительной информации смотрите:

• Справочник атрибута draggable (en-US)
• Руководство по операциям перетаскивания

Определите данные перетаскивания

Приложение может добавлять в операцию перетаскивания любое количество элементов данных. Каждый элемент данных — это строка определённого типа . Обычно MIME-тип равен text/html .

У каждого события перетаскивания (en-US) есть свойство dataTransfer (en-US), которое содержит данные о событии. Это свойство (являющееся объектом DataTransfer ), также имеет методы управления данными перетаскивания. Метод setData() (en-US) используется для добавления элемента в данные перетаскивания, как показано в следующем примере.

function dragstart_handler(ev)  // Добавление различных типов данных перетаскивания ev.dataTransfer.setData("text/plain", ev.target.innerText); ev.dataTransfer.setData("text/html", ev.target.outerHTML); ev.dataTransfer.setData( "text/uri-list", ev.target.ownerDocument.location.href, ); > 

• Список общих типов данных, используемых при перетаскивании (например, текст, HTML, ссылки и файлы), смотрите в разделе Рекомендуемые типы перетаскивания (en-US).
• Для получения дополнительной информации, смотрите раздел Данные перетаскивания.

Определите изображение перетаскивания

По умолчанию браузер предоставляет изображение, которое в процессе перетаскивания отображается рядом с указателем. Тем не менее, приложение может использовать сторонее изображение с помощью метода setDragImage() (en-US), как показано в следующем примере.

function dragstart_handler(ev)  // Создайте изображение, чтобы использовать как изображение перетаскивания // Примечание: замените "example.gif" на URL-адрес реального изоражения, // иначе оно не будет создано и будет использоваться изображение по умолчанию let img = new Image(); img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); > 

Узнать больше об изображении перетаскивания можно в:

Определите эффект перетаскивания

Свойство dropEffect (en-US) используется для управления обратной связью, которую пользователь получает во время операции перетаскивания. Обычно это влияет на то, какой курсор будет отображаться во время перетаскивания. Например, когда пользователь наводит указатель на цель сброса, курсор браузера может отражать тип операции, которая будет произведена.

Можно определить три эффекта:

1. copy обозначает, что перетаскиваемые данные будут скопированы из предыдущего места в место сброса.
2. move обозначает, что перетаскиваемые данные будут перемещены из предыдущего места в место сброса.
3. link обозначает, что между исходным местоположением и местом сброса будет создана некоторая форма свази.

В течение операции перетаскивания, эффекты перетаскивания могут быть изменены, чтобы обозначить, что в разных местах доступны разные эффекты.

Следующий пример демонстрирует, как использовать это свойство.

function dragstart_handler(ev)  ev.dataTransfer.dropEffect = "copy"; > 

Для получения дополнительной информации смотрите:

Определите зону сброса

По умолчанию, при сбросе на большинство элементов, браузер не производит никаких действий. Чтобы изменить это поведение и сделать элемент зоной сброса или сбрасываемым, он должен иметь атрибуты для обработчиков событий ondragover (en-US) и ondrop (en-US).

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

script> function dragover_handler(ev)  ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; > function drop_handler(ev)  ev.preventDefault(); // Получить id цели и добавить перемещённый элемент в его DOM const data = ev.dataTransfer.getData("text/plain"); ev.target.appendChild(document.getElementById(data)); > script> p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"> Drop Zone p> 

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

Для получения дополнительной информации смотрите:

Обработайте эффекты сброса

Обработчик события drop (en-US) может по-разному обрабатывать данные перетаскивания, в зависимости от конкретного приложения.

Как правило, для извлечения и последующей обработки элементов перетаскивания, приложение использует метод getData() (en-US). Кроме того, семантика приложения может отличаться в зависимости от значения dropEffect (en-US) и состояния кнопок-модификаторов.

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

script> function dragstart_handler(ev)  // Добавить id целевого элемента в объект передачи данных ev.dataTransfer.setData("application/my-app", ev.target.id); ev.dataTransfer.effectAllowed = "move"; > function dragover_handler(ev)  ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; > function drop_handler(ev)  ev.preventDefault(); // Получить id целевого элемента и добавить перемещаемый элемент в его DOM const data = ev.dataTransfer.getData("application/my-app"); ev.target.appendChild(document.getElementById(data)); > script> p id="p1" draggable="true" ondragstart="dragstart_handler(event)"> This element is draggable. p> div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"> Drop Zone div> 

Для получения дополнительной информации смотрите:

Завершение перетаскивания

В конце операции перетаскивания событие dragend (en-US) происходит у исходного элемента, который был целью начала перетаскивания.

Это событие происходит независимо от того, было перетаскивание выполнено или прервано. Обработчик события dragend может проверить значение свойства dropEffect (en-US) чтобы определить, успешно ли выполнена операция перетаскивания.

Для получения дополнительной информации об обработке завершения операции перетаскивания, смотрите:

Поддержка

Из таблицы поддержки браузерами интерфейса DataTransferItem (en-US) видно, что поддержка drag-and-drop достаточно обширная среди десктопных браузеров (за исключением интерфейсов DataTransferItem (en-US) и DataTransferItemList (en-US), у которых поддержка ниже). Эти данные также указывают, что среди мобильных устройств поддержка очень низкая.

Примеры и демо

• Копирование и перемещение элементов с помощью интерфейса DataTransfer
• Копирование и перемещение элементов с помощью интерфейса DataTransferListItem
• Перетаскивание и сброс файлов (только Firefox): https://jsfiddle.net/9C2EF/
• Перетаскивание и сброс файлов (все браузеры): https://jsbin.com/hiqasek/
• Использование Drag and Drop API в проекте парковки: https://park.glitch.me/ (Отредактировать можно здесь)

Спецификации

Specification
HTML Standard # dnd

Совместимость с браузерами

Смотрите также

• Операции перетаскивания
• Перетаскивание и сброс нескольких файлов
• Рекомендуемые типы перетаскивания (en-US)
• HTML5 Living Standard: Drag and Drop
• Информация о поддержке Drag and Drop из CanIUse

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.