Войти
s-lub » Учебники » HTML 5 » Drag and Drop

Drag and Drop

Drag and Drop

Drag and drop – позволяет пользователям вашего сайта самостоятельно перетаскивать или менять расположение элементов или блоков на сайте, тем самым подстраивая его под себя.

Это и раньше можно было реализовать, но только при помощи сложных jаvascript функций или подключением jQuery. С приходом HTML 5 эта функция встроена во все современные браузеры.

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

Пример:

<img src="/img/html.jpg" draggable='true'>

Так же к перетаскиваемому объекту можно добавить специальные события:

- dragstart - Выполнится в начале операции перетаскивания

- ondrag - Выполнится во время перетаскивания элемента

- ondragenter - Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять

- ondragleave - Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять

- ondragover - Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять

- ondrop - Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент

- ondropend - Выполнится в конце операции перетаскивания

Сам процесс перетаскивания объекта можно разделить на две части:

- сохранение данных в начале перетаскивания;

- извлечение сохранённых данных после перемещения объекта в принимающий его объект.

Для сохранения данных используется метод: 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>


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas