В этой главе Вы узнаете о новой технологии HTML5 drag and drop.
ТвитнутьОбратите внимание: браузеры Internet Explorer 9+, Chrome, Firefox, Opera, и Safari имеют поддержку drag and drop.
Технология drag and drop (иногда может упоминаться как drag'n'drop) позволяет сделать элементы на Ваших веб-страницах перетаскиваемыми (совсем как окна с программами в операционной системе).
Ранее это было возможным только с помощью реализаций сложных JavaScript функций или подключением jQuery. Сейчас технология drag and drop является частью спецификации HTML5 и ее поддержка встроена во все современные веб-браузеры.
Практически любые элементы на веб-страницах можно сделать перетаскиваемыми включая картинки, ссылки и обычные текстовые элементы. Для того, чтобы сделать элемент перетаскиваемым необходимо добавить к нему HTML5 атрибут draggable со значением true.
Мало просто сделать элемент перетаскиваемым (Вы можете в этом убедится запустив предыдущий пример), чтобы извлечь из этого какую-либо пользу мы должны дополнительно обработать перетаскиваемый элемент с помощью специальных событий перетаскивания, которые были добавлены в HTML5:
| Событие | Описание |
|---|---|
| dragstart | Выполнится в начале операции перетаскивания |
| ondrag | Выполнится во время перетаскивания элемента |
| ondragenter | Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять |
| ondragleave | Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять |
| ondragover | Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять |
| ondrop | Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент |
| ondropend | Выполнится в конце операции перетаскивания |
Всю обработку перетаскивания элемента можно условно разбить на два шага:
1. Сохранение данных перетаскиваемого элемента в начале операции перетаскивания.
2. Извлечение ранее сохраненных данных, после того, как перетаскиваемый элемент будет перемещен в принимающий его элемент.
Для того, чтобы сохранить данные мы должны воспользоваться методом setData("тип_данных","сохраняемые_данные") HTML5 объекта DataTransfer. Данные перетаскиваемого элемента необходимо сохранять в самом начале перетаскивания, то есть во время события ondragstart.
Пример
<script>
function dragImg(e) {
alert(e.target.id);
e.dataTransfer.setData("text/plain",e.target.id);
}
function dragEl(e) {
alert(e.target.innerHTML);
e.dataTransfer.setData("text/html",e.target.innerHTML);
}
</script>
<img src="gimg3.gif" draggable="true" ondragstart="dragImg(event)" id="draggable-element">
<div id="dragel" draggable="true" ondragstart="dragEl(event)">Меня можно перетаскивать!</div>
Для того, чтобы извлечь ранее сохраненные данные мы должны воспользоваться методом getData("тип_данных") объекта DataTransfer. Данные перетаскиваемого элемента необходимо извлекать после того, как перетаскиваемый элемент будет перемещен в область принимающего его элемента, то есть во время события ondrop.
Обратите внимание: тип данных во время сохранения и извлечения должен совпадать, то есть если Вы сохраняли данные с типом "text/plain" Вы должны использовать "text/plain" и для их извлечения.
По умолчанию элементы не могут принимать другие элементы, поэтому если мы хотим создать принимающий элемент мы должны привязать к нему обработчик события ondragover и передать ему event.preventDefault().
Пример
<script>
function makeDroppable(e) {
e.preventDefault();
}
function dragImg(e) {
e.dataTransfer.setData("text/plain",e.target.id);
}
function dropImg(e) {
var rdata = e.dataTransfer.getData("text/plain");
e.target.innerHTML="";
e.target.appendChild(document.getElementById(rdata))
}
</script>
<img src="gimg3.gif" draggable="true" ondragstart="dragImg(event)" id="draggable-element">
<div id="dropel" ondrop="dropImg(event)" ondragover="makeDroppable(event)">Перетащите элемент сюда!</div>