Перетаскивание блоков на веб-странице с использованием HTML (drag and drop)
Поиск

Перетаскивание блоков на веб-странице с использованием HTML (drag and drop)

Nikel, 20.05.2019

Наверняка вам приходилось видеть как можно перетаскивать элементы на веб-страницах с помощью мыши. Оказывается сделать подобное не очень трудно используя новые возможности html5 и небольшое количество javascript-кода.

Оказывается можно самостоятельно создать блоки на веб-странице, которые можно перемещать и сделать это не так сложно. С тех пор, как появился HTML5  у нас существует собственный метод создания интерфейсов перетаскивания (с небольшой помощью JavaScript). В настоящее время HTML5 drag and drop поддерживается всеми основными  браузерами.

События перетаскивания (drag and drop)

На каждом этапе операции перетаскивания drag and drop(тащи и бросай) запускается определенное событие, чтобы браузер знал, какой код JavaScript выполнять.

dragStart:
срабатывает, когда пользователь начинает перетаскивать элемент.
dragEnter:
срабатывает при первом перетаскивании перетаскиваемого элемента по целевому элементу.
dragOver:
срабатывает при перемещении мыши по элементу во время перетаскивания.
dragLeave:
запускается, если курсор пользователя покидает элемент при перетаскивании.
drag:
срабатывает при каждом перемещении мыши во время перетаскивания элемента.
drop:
происходит, когда элемент отпускают и он падает.
dragEnd:
срабатывает, когда пользователь отпускает кнопку мыши при перетаскивании объекта.

Такое количество событий обеспечивает большой контроль над тем, как работает ваш интерфейс и как именно он работает в разных обстоятельствах.

Объект передачи данных

Здесь происходит вся магия перетаскивания; этот объект содержит данные, отправленные операцией перетаскивания. Данные могут быть установлены и получены различными способами, наиболее важными из них являются:

dataTransfer.effectAllowed=value:
возвращает типы разрешенных действий, возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
dataTransfer.setData(format, data):
добавляет указанные данные и их формат.
dataTransfer.clearData( format ):
очищает все данные  определенного формата.
dataTransfer.setDragImage(element, x, y):
устанавливает изображение, которое вы хотите перетащить, значения x и y указывают, где должен быть курсор мыши (0, 0 разместит его в левом верхнем углу).
data = dataTransfer.getData(format) :
как следует из названия, он возвращает данные определенного формата.

Создание рабочего примера перетаскивания

Теперь мы начнем создавать наш простой пример перетаскивания. Как вы можете видеть, что у нас есть два маленьких div и больший, мы можем перетащить маленькие внутри большого, и мы даже можем переместить их обратно.

Перетаскивание объекта

Первое, что нам нужно сделать, это создать  HTML. Мы делаем блоки div перетаскиваемыми при помощи атрибута draggable:

После этого нам нужно определить функцию javascript, которая будет работать, когда мы начнем перетаскивать этот элемент:

В этом коде мы сначала объявляем, какой тип действий мы допускаем в операции с помощью dataTransfer.effectAllowed, в данном случае мы устанавливаем, что для перемещения (move).  Во второй строке мы устанавливаем данные для операции dataTransfer.setData, и в этом случае тип — текст, а значением будет идентификатор id элемента, который мы перетаскиваем. После этого мы используем метод setDragImage, чтобы установить, что мы будем перетаскивать и где курсор будет во время перетаскивания, и поскольку наши блоки 200 на 200 пикселей, помещаем его в самый центр. В конце функция возвращает true.

Удаление объекта

Для того, чтобы элемент был брошен, отпущен, ему нужно прослушать 3 разных события: dragEnter, dragOver, а также событие drop, поэтому давайте добавим это в наш html в div с идентификатором big:

Теперь, когда мы добавили прослушиватели событий, нам нужно создать эти функции, мы начнем с событий dragenter и dragover:

В первой функции мы определяем, что мы хотим, чтобы произошло, когда элемент, который мы перетаскиваем, достигает элемента, на который он должен быть сброшен. В этом случае мы только предотвращаем поведение браузера по умолчанию (с помощью preventDefault()), но вы можете внести любые изменения, такие как изменение фона или добавление текста, чтобы указать, что пользователь перетаскивает в правильную область, а также с помощью события dragleave  отменить внесенные изменения. Далее в функции dragOver мы также просто предотвращаем действия, выполняемые по умолчанию, чтобы позволить падение элемента.

Далее мы определяем функцию, которая работает, когда мы фактически бросаем элемент в нужную область:

Что происходит здесь? В этой последней части мы сначала устанавливаем переменную data, в которой мы получаем все данные, доступные для текстового формата, а затем мы добавляем эти данные (которые будут элементом, который мы перетаскиваем) в div, где мы хотим удалить элемент. Наконец, некоторые последние штрихи, такие как остановка распространения, а также возврат false.

Демонстрационный пример

Как мы убедились, в демонстрационном примере два дива можно перетащить обратно в исходное место.

К счастью, изменить область перетаскивания на другую довольно просто. Поскольку функции уже на месте, все, что нам нужно сделать, это добавить прослушиватели событий, например:

Существует множество приложений перетаскивания, построенных с использованием библиотек JavaScript, и часто проще использовать эти библиотеки. Но техника с применением HTML5 и JavaScript не очень сложна и в некотрых случаях может быть полезна.