Что нужно знать про Drag and Drop?
Дословно Drag-and-Drop переводится с английского, как «перетяни и кинь». Именно таким образом осуществляется перетаскивание элементов с использованием мыши. Чаще всего это действие ассоциируется с перемещением файлов в папку.
Возможность перетаскивания блоков и элементов из одной секции в другую делает удобными такие конструкторы сайтов, как Tilda, Craftum и Wix. В них любой пользователь может создать страницу без знания программирования. Удобный и понятный интерфейс позволяет собрать лендинг буквально за пару часов. Сегодня мы покажем, как создавать такие же перетаскиваемые фрагменты.
Как реализовать эффект Drag and Drop с помощью JavaScript
Первое, что нужно отметить, мы реализуем перетаскивание элементов без загрузки фреймворков и библиотеки Java Script. Для желаемого результата достаточно знаний API-интерфейса и браузеры версий: Firefox 3.5+, Chrome 4, 9+, Safari 6+, Opera 12+.
Прежде чем писать код, нужно решить 2 задачи:
- Определяемся, что и куда будем перетаскивать (draggable element и dropzone).
- После чего решаем, что именно будет происходить с перетаскиваемым элементом.
И как всегда, при выполнении заданных условий, в браузере запускаются события. Поэтому сейчас мы подробнее остановимся на тех, которые срабатывают до тех пор, пока объект не окажется в целевой области.
Обзор событий
При перетаскивании элементов возникает 7 событий. Даже если их функция понятна на интуитивном уровне, нужно четко представлять при каких обстоятельствах они возникают.
- Dragstart – это событие срабатывает на старте перетаскивания элемента, как только его зажимает мышь.
- Dragenter – сработает при входе перетаскиваемого элемента в целевую область (объект).
- Dragover – отследить событие Dragover можно в момент, когда перетаскиваемый элемент находится в зоне целевого объекта, но еще не отпущен.
- Dragleave – означает выход перетаскиваемого элемента из целевого объекта, при этом клавиша мыши все еще зажата.
- Drag – это событие происходит на протяжении всего времени, пока элемент в процессе перетаскивания.
- Drop – если происходит данное событие, значит перетаскиваемый элемент «упал» при отпуске зажатой клавиши.
- Dragend – на этом событии процесс перемещения элемента завершается (элемент либо успешно переместился, либо перетаскивание отменилось).
Этот список событий делится на две подгруппы. События № 1, 5, 7 применимы для элемента, который мы перетаскиваем. Остальные используются для целевой области. Наоборот они не функционируют и также не могут сработать одновременно. Поэтому вам нужно определиться, что будет происходить на экране при перетаскивании вашего элемента в dropzone. Наверняка, вам хочется перейти к делу. Все пояснения есть в инструкции.
VDS и VPS
биллингом по всему миру: Россия, Азия и Европа.
Пошаговая инструкция
В качестве перетаскиваемых элементов могут быть блоки, фото, текст. Мы приведем пример с использованием списка задач, который нужно выполнить. То есть под перетаскиваемым элементом будет «TASK», а целевая область — «DONE». В html-разметке будет два <div>, поскольку один draggable element и одна drop zone. Вы можете создавать сколько угодно элементов и зон сброса.
Первый шаг: создаем перетаскиваемый элемент
В новом каталоге проекта создаем HTML-файл и помещаем в него базовый код веб-страницы. Также в этой папке сразу создаем файл с расширением .css и .js. И чтобы не забыть, ссылку на файл style.css вставляем между тегов <head>, а ссылку src="script.js" перед закрытием тега <body>.
<!DOCTYPE html>
<html lang="ru">
<head>
<title> Example to Perform Drag and Drop</title>
<link rel="stylesheet" href=" css/ style.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Теперь нужно создать перетаскиваемый элемент и целевую зону. Как мы уже упоминали выше, между тегами <body> помещаем перетаскиваемый элемент под названием TASK и область, куда его скинем. Также обратите внимание, что нужно разрешить перемещение элементов, указав около атрибута draggable значение true. Чтобы запретить перетаскивание или задать поведение автоматически (по умолчанию), используйте команды: draggable=" false | auto"
<!DOCTYPE html> <html lang="ru"> <head> <title> Example to Perform Drag and Drop</title> <link rel="stylesheet" href=" css/ style.css" /> </head> <body> <div class="parent"> <div class="origin"> <div id="element-1" class="draggable-element" draggable="true" > TASK </div> </div> <div class="example-dropzone" > DONE </div> </div> <script src="script.js"></script> </body> </html>
Копируйте код в свой файл, затем сохраняйте и можете закрывать.
Второй шаг: стилизуем элементы
О том, как много возможностей предлагает каскадная таблица стилей CSS, знают все. Индивидуально стилизуем каждый класс.
.parent { border: 40px solid #DEB887; color: #800000; display: flex; font-family: verdana; font-weight: bold; } .origin { flex-basis: 100%; flex-grow: 3; padding: 5px; } .draggable-element { background-color: #FFDEAD; font-family: verdana; font-weight: bold; margin-bottom: 5px; margin-top: 5px; padding: 5px; } .dropzone { background-color: #FFEBCD; flex-basis: 100%; flex-grow: 2; padding: 5px;}
Поскольку мы уже добавили ссылку на css в нашем html-файле, можно открыть страницу через браузер. Если попробовать захватить draggable element, появляется запрещающий знак. Это значит, что перетаскивание элементов не реализовано. Поэтому переходим к следующему этапу.
Третий шаг: запуск событий
Если не обработать события drag and drop, с нашим элементом при перемещении ничего не произойдет. Через HTML-атрибуты назначаем обработчика событий, чтобы запустить операцию перетаскивания: on {событие}. Не забывайте, что draggable-элементу и целевой зоне принадлежат разные события.
В нашем проекте используются основные обработчики событий:
- Обработчик событий ondragstart срабатывает при возникновении события dragstart с перетаскиваемым элементом.
- Как мы писали выше, событие dragover относится к dropzone. Оно срабатывает при перемещении элемента в целевой зоне.
- Обработчик ondrop уведомляет о завершении операции перетаскивания, то есть когда перетаскиваемый элемент опустился в dropzone.
Для сохранения данных в момент перетаскивания используем объект dataTransfer. Он приравнивается к событийному объекту Event. При необходимости можно воспользоваться тремя методами dataTransfer:
- setData() — устанавливает данные для перетаскивания.
- clearData() — при вызове этой функции удаляются все данные.
- getData() - возвращает все данные, которые установлены в событии dragstart.
Открываем файл script.js и для каждого из элементов, при возникновении на нем события, будем запускать соответствующую функцию.
Поскольку в наш блок помещен текст, для его перетаскивания мы используем text/plain .
function onDragStart(event) { event .dataTransfer .setData('text/plain', event.target.id); event .currentTarget .style .backgroundColor = 'red'; } function onDragOver(event) { event.preventDefault(); } function onDrop(event) { const id = event .dataTransfer .getData('text'); const draggableElement = document.getElementById(id); const dropzone = event.target; dropzone.appendChild(draggableElement); event .dataTransfer .clearData(); }
Применим метод preventDefault(), чтобы отменить действие браузера по умолчанию. Так события будут происходить при выполнении конкретных условий. Мы использовали три обработчика событий, которые добавляем в первом и втором <div> в файле HTML.
Код в законченном виде:
<!DOCTYPE html>
<html lang="ru">
<head>
<title> Example to Perform Drag and Drop</title>
<link rel="stylesheet" href=" css/ style.css" />
</head>
<body>
<div class="example-parent">
<div class="example-origin">
<div id="draggable-1"
class="example-draggable"
draggable="true"
ondragstart="onDragStart(event);" >
draggable
</div>
</div>
<div class="example-dropzone"
ondragover="onDragOver(event);"
ondrop="onDrop(event);">
dropzone
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Размещайте свои проекты на VDS/VPS
в Timeweb Cloud
477 ₽/мес
657 ₽/мес
Итоги
На нашем примере видно, как, используя HTML Drag and Drop, осуществить перемещение элементов на чистом языке JavaScript. Следуя этому алгоритму действий, можно переходить к реализации более масштабных проектов (а разместить их всегда можно на облачных серверах timeweb.cloud). Помните, что в разработке продуманный графический интерфейс выстраивает коммуникацию между пользователем и приложением/сайтом.
