HTML5 перетаскивания

Предыдущая: HTML5 встроенный SVG

Далее: HTML5 геопозиционирование

Перетащите (перетаскивание) является частью стандарта HTML5.

W3cschool значок и перетащить его в прямоугольник.

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

Перетащите является общей чертой, что ползать на другое место после объекта.

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

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

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari и поддержка перетаскивания.

Примечание: Safari 5.1.2 не поддерживает перетаскивание.

HTML5 Drag и падение Примеры

Следующий пример представляет собой простой перетащить и падение Пример:

примеров

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Попробуйте »

Это может показаться немного сложным, но мы смогли изучить различные части события перетаскивания.

Элемент установлен на падение

Во-первых, для того, чтобы сделать элемент перетаскиваемые, установите перетаскиваемую атрибут истина:

Перетащите Что - ondragstart и УстановитьДанные ()

Затем, когда элемент перетаскивается положение, что будет происходить.

В приведенном выше примере, ondragstart атрибут вызывает функцию, перетаскивание (событие), который определяет перетаскиваемые данные.

dataTransfer.setData () метод, чтобы задать тип данных и значение буксируемых данные:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

В этом примере, тип данных "Текст", значение перетаскиваемыми идентификатор элемента ( "drag1").

Где поставить - OnDragOver

OnDragOver событие, оговоренное куда поместить перетаскиваемые данные.

По умолчанию, вы не можете поместить данные / элементы в другие элементы. Если вам необходимо настроить позволяет размещать, мы должны предотвратить обработку по умолчанию элемента.

Сделайте это по телефону OnDragOver event.preventDefault событий () метод:

event.preventDefault()

Располагаться - OnDrop

При размещении перетаскиваемых данных, падение происходит событие.

В приведенном выше примере, OnDrop атрибут вызывает функцию, падение (событие):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Код товара:

Вызвать preventDefault (), чтобы предотвратить браузер по умолчанию для обработки данных (поведение капля по умолчанию для события, чтобы открыть ссылку)
Получить перетаскиваемые данные через dataTransfer.getData метод ( "Текст"). Этот метод возвращает тот же набор данных любого типа в методе УстановитьДанные ().
Данные буксируемых буксируемых идентификатор элемента ( "drag1")
Тащили элемент добавляется расставить элементы (целевой элемент) в

Другие примеры

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