Уже в течение долгого времени существуют JavaScript функции, которые позволяют нам создавать drag & drop интерфейсы. Но ни одна из этих реализаций, не является родной для браузера.У HTML5 есть собственный метод создания drag & drop интерфейсов (с небольшой помощью JavaScript). В этой статье, мы расскажем вам, как этого можно достичь …
Поддержка браузеров
В настоящее время HTML5 drag & drop поддерживается всеми основными браузерами для десктопов (в том числе IE (даже в IE 5.5 имеется частичная поддержка)), но не поддерживается ни одним из популярных мобильных браузеров.
Drag&Drop события
На каждом этапе перетаскивания (drag & drop) запускаются различные события для того, чтобы браузер знал, какой JavaScript код нужно выполнять. Список событий:
- dragStart: запускается, когда пользователь начинает перетаскивать элементы;
- dragEnter: запускается, когда перетаскиваемый элемент впервые перетаскивается над целевым элементом;
- dragOver: срабатывает при перемещении мыши над элементом, когда происходит перетаскивание;
- dragLeave: запускается, если курсор пользователя оставляет элемент при перетаскивании;
- drag: приходит в действие каждый раз, когда мы двигаем мышью во время перетаскивания нашего элемента;
- drop: запускается, когда выполняется фактический drop;
- dragEnd: срабатывает, когда пользователь отпускает кнопку мыши при перетаскивании объекта.
С учетом всех этих слушателей событий, у вас есть хороший контроль над тем, как будет работать интерфейс.
Объект dataTransfer
Именно здесь и происходит все drag&drop волшебство. Этот объект содержит данные, которые были отправлены drag операцией. Данные могут быть установлены и получены различными способами, наиболее важными из которых являются:
- dataTransfer.effectAllowed=value: возвращает разрешенные типы действий, возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
- dataTransfer.setData(format, data): добавляет определенные данные и формат.
- dataTransfer.clearData( format ): очищает все данные для определенного формата.
- dataTransfer.setDragImage(element, x, y): задает изображение, которое вы хотите перетащить, х и у значения указывают, где должен быть курсор мыши(0, 0 расположит его вверху слева).
- data = dataTransfer.getData(format) : как следует из названия, он возвращает данные для определенного формата.
Создание drag&drop примера
Теперь мы начнем создавать простой drag&drop пример. Как вы видите, у нас есть два маленьких divs и один большой, мы можем перетащить маленькие дивы внутрь большого, и даже переместить их обратно.
Перетаскивание объекта
Первое, что нам нужно сделать, это создать HTML. Мы делаем div перетаскиваемыми с помощью draggable атрибута:
<div id="boxA" draggable="true"></div>
Когда это будет сделано, мы должны определить JavaScript функцию, которая будет cрабатывать, как только мы будем начинать передвигать этот элемент:
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 пикселей, мы поместили его в самый центр. В конце, мы возвращаем return true.
Drop объекта
Для того, чтобы элемент принял drop, он должен прослушать 3 различных события: dragEnter, dragOver, а также drop события. Так что давайте добавим это к нашему HTML5 в div с ID большого (big):
<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
После того как мы добавили слушатели событий, нам нужно создать эти функции. Начнем с dragEnter и dragOver событий:
function dragEnter(ev) {
ev.preventDefault();
return true;
}
function dragOver(ev) {
ev.preventDefault();
}
В первой функции мы определяем, что должно произойти, когда элемент, который мы перетаскиваем достигнет требуемого элемента, где должен произойти drop, в данном случае мы только предотвращаем поведение браузера по умолчанию. Следующее, в dragOver функции мы просто не допускаем, чтобы произошел drop по умолчанию.
В следующей части, мы определяем функцию, для того, когда элемент будет “брошен” на желаемой цели:
function dragDrop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.stopPropagation();
return false;
}
В этой последней части, мы сначала установили переменную data, где мы получаем все данные, которые доступны для текстового формата, а затем мы добавляем data к div, где нужно “бросить” элемент.
Сделать секцию drop целью
В демо показано, что два div могут быть перемещены обратно на свои места. К счастью, добавление еще одной drop цели, намного проще, чем вы думаете. Потому что эти функции у нас уже есть и все, что нам нужно сделать, это добавить слушатели событий:
<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
И это все, что нужно для того, чтобы позволить перетаскивание div на прежнее место.
Существует много drag&drop приложений, которые построены с использованием JavaScript библиотек, и зачастую использовать их проще. Но мы надеемся, что в этой HTML5 и JavaScript технике, вы увидете будущий потенциал для решения ваших задач.
