- PVSM.RU - https://www.pvsm.ru -
Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.
На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com [1].
Ниже перечислены события Drag&Drop, с помощью которых можно контролировать процесс перетаскивания:
Здесь происходит сам процесс перетаскивания. Наиболее важные параметры:
Теперь рассмотрим наглядный простой пример использования Drag&Drop [2], где два маленьких синих div'а можно переместить в большой красный, а также вернуть их на исходное место.
В первую очередь необходимо создать HTML-разметку блоков, добавив атрибут draggable:
<div id="boxA" draggable="true"></div>
Затем определить JavaScript-функцию начала процесса:
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,100,100);
return true;
}
В первой строке задан возможный тип перетаскивания — move, во второй — устанавливаются данные процесса — тип (Text) и ID. В третьей строке setDragImage определяет положение курсора, в данном случае в середине квадрата 200х200 пикселей.
Потребуется задать три события: dragEnter, dragOver и drop:
<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
Кроме того, требуется добавить JavaScript-функции для завершения процесса перетаскивания — определить, что должно случиться с элементами, когда курсор будет отпущен:
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
event.preventDefault();
}
В данном простом примере заданы только основные действия, но можно добавить другие — изменение цвета фона, добавления текста и т.д. Далее — заключительный этап. Здесь задаются действия окончания перетаскивания:
function dragDrop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.stopPropagation();
return false;
}
Как видно из примера [2], синие блоки после перетаскивания можно вернуть на исходное место. К счастью, сделать это очень просто. Все функции объявлены, осталось добавить следующий код:
<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
С помощью JavaScript-библиотек создано большое количество решений для Drag&Drop, и зачастую они проще в использовании, чем описанный пример. Однако скорее всего в будущем все чаще будет использоваться связка HTML5 & JavaScript.
Автор: grokru
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/40784
Ссылки в тексте:
[1] таблице caniuse.com: http://caniuse.com/dragndrop
[2] простой пример использования Drag&Drop: http://codepen.io/SaraVieira/full/DCHAz
[3] HTML5 Drag and Drop: http://www.w3schools.com/html/html5_draganddrop.asp
[4] HTML 5 Drag & Drop Basics: http://www.htmlgoodies.com/html5/tutorials/html-5-drag-drop-basics.html
[5] How to use HTML5′s drag and drop: http://www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/
[6] HTML5 Drag and drop: http://www.tutorialspoint.com/html5/html5_drag_drop.htm
[7] Источник: http://habrahabr.ru/post/187582/
Нажмите здесь для печати.