Как создать перетаскиваемый элемент
Что нужно знать про 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. Наверняка, вам хочется перейти к делу. Все пояснения есть в инструкции.
Пошаговая инструкция
В качестве перетаскиваемых элементов могут быть блоки, фото, текст. Мы приведем пример с использованием списка задач, который нужно выполнить. То есть под перетаскиваемым элементом будет «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>Итоги
На нашем примере видно, как, используя HTML Drag and Drop, осуществить перемещение элементов на чистом языке JavaScript. Следуя этому алгоритму действий, можно переходить к реализации более масштабных проектов (а разместить их всегда можно на облачных серверах timeweb.cloud). Помните, что в разработке продуманный графический интерфейс выстраивает коммуникацию между пользователем и приложением/сайтом.