English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Перетаскивание - это обычная функция, которая позволяет захватывать объект и перетаскивать его в другое место. В HTML5 перетаскивание является частью стандарта, и любая элемент может быть перетаскиваемым.
Перетаскивание (Drag и drop) является частью стандарта HTML5.
Перетащите значок oldtoolbag.com в прямоугольную рамку.
Перетаскивание - это обычная функция, которая позволяет захватывать объект и перетаскивать его в другое место.
В HTML5 перетаскивание является частью стандарта, и любая элемент может быть перетаскиваемым.
Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают перетаскивание.
Внимание:Safari 5.1.2 не поддерживает перетаскивание.
Ниже приведен пример простого примера перетаскивания:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
функция allowDrop(ev)
{
ev.preventDefault();
}
функция 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>Перетащите изображение oldtoolbag.com в прямоугольную рамку:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>Проверьте ‹/›Это может показаться сложным, но мы можем изучить различные части события перетаскивания по отдельности.
Сначала, чтобы сделать элемент перетаскиваемым, установите атрибут draggable в true:
<img draggable="true">
Затем определяется, что произойдет, когда элемент будет перетаскиваться.
В предыдущем примере атрибут ondragstart вызвал функцию drag(event), которая определяет данные для перетаскивания.
Метод setData() устанавливает тип данных и значение для перетаскиваемых данных:
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
Text - это DOMString, представляющий тип данных для перетаскивания, которые необходимо добавить в объект перетаскивания. Значение - идентификатор перетаскиваемого элемента ("drag1").
Событие ondragover определяет, где можно放置 перетаскиваемые данные.
По умолчанию, данные/элементы не могут быть放置ены в другие элементы. Если необходимо разрешить放置,我们必须 предотвратить defaultManager для элементов.
Это достигается вызовом метода event.preventDefault() события ondragover:
event.preventDefault()
Происходит событие drop при放置 перетаскиваемых данных.
В предыдущем примере атрибут ondrop вызвал функцию, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Объяснение кода:
Вызов preventDefault() для предотвращения стандартной обработки данных браузером (стандартное поведение события drop - это открытие данных в виде ссылки)
Получите перетаскиваемые данные с помощью метода getDataTransfer.getData("Text"). Этот метод возвращает любое данные, установленные в setData() методу того же типа.
Перетаскиваемые данные - это идентификатор перетаскиваемого элемента ("drag1")
Добавить перетаскиваемый элемент в элемент放置а (цель элемента)
Перетаскивание изображений в HTML5
Как перетаскивать изображения между двумя элементами <div> .