Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы 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 Графика

HTML Холст HTML 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 Canvas HTML Аудио/Видео HTML Типы документов HTML Наборы символов HTML URL Кодировка HTML Коды языка 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>:

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