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

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

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

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

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

HTML Перетаскивание



SchoolsW3

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


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

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

В HTML5 перетаскивание является частью стандарта: любой элемент может быть перетаскиваемым.


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

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

API
Захватить и тащить 4.0 9.0 3.5 6.0 12.0

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

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

Пример

<!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")
  • Добавление перетаскиваемого элемента в элемент drop

Еще примеры

Перетащите изображение вперед и назад

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

Редактор кода »