САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветHTML с CSSHTML СсылкиHTML ИзображениеHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

HTML Формы

HTML ФормыHTML Элементы вводаHTML Типы вводаHTML Атрибуты вводаHTML Атрибуты форм ввода

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

HTML ПримерыHTML ТестированиеHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL КодировкаHTML Коды языкаHTTP СообщенияHTTP МетодыPX в EM конвертерКлавишные комбинации

HTML5 Перетаскивание API



В HTML любой элемент можно перетащить и удалить.

Пример

Schoolsw3

Перетащите изображение Schoolsw3 в прямоугольник.


Схватать и сбросить

Перетаскивание - очень распространенная функция. Это когда вы "хватаете" объект и перетаскиваете его в другое место.


Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает перетаскивание.

API
Перетаскивание 4.0 9.0 3.5 6.0 12.0

Пример перетаскивания

Приведенный ниже пример представляет собой простой пример перетаскивания:

Пример

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
Попробуйте сами »

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



Сделать элемент перетаскиваемым

Прежде всего: чтобы сделать элемент перетаскиваемым, установите атрибут draggable в true:

<img draggable="true">

Что схватывает - ondragstart и setData()

Затем укажите, что должно произойти при перетаскивании элемента.

В приведенном выше примере атрибут ondragstart вызывает функцию drag(event), которая определяет, какие данные следует перетаскивать.

Метод dataTransfer.setData() задает тип данных и значение перетаскиваемых данных:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

В этом случае тип данных является "text" и значение - это идентификатор перетаскиваемого элемента ("drag1").


Куда сбросить - ondragover

Событие ondragover указывает, куда могут быть отброшены перетаскиваемые данные.

По умолчанию данные/элементы не могут быть удалены в другие элементы. Чтобы разрешить падение, мы должны предотвратить обработку элемента по умолчанию.

Это делается путем вызова метода event.preventDefault() для события ondragover:

event.preventDefault()

Сделайте сброс - ondrop

Когда перетаскиваемые данные отбрасываются, происходит событие отбрасывания.

В приведенном выше примере атрибут ondrop вызывает функцию drop(event):

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Объяснение кода:

  • Вызовите функцию preventDefault(), чтобы предотвратить обработку данных браузером по умолчанию (по умолчанию открывается как ссылка при выпадении)
  • Получите перетаскиваемые данные с помощью метода dataTransfer.getData(). Этот метод вернет все данные, которые были заданы в том же типе в методе setData()
  • Перетаскиваемые данные - это идентификатор перетаскиваемого элемента ("drag1")
  • Добавить перетаскиваемый элемент в элемент

Еще примеры

Пример

Как перетащить изображение вперед и назад между двумя элементами <div>:

Попробуйте сами »