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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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> :

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