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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML 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 конвертер Клавишные комбинации

HTML Перетаскивание 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>:

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