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

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 vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop 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 Перетаскивание



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> :

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