Example to Perform Drag and Drop
Как создать перетаскиваемый элемент
Что нужно знать про 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-разметке будет два , поскольку один draggable element и одна drop zone. Вы можете создавать сколько угодно элементов и зон сброса.
Первый шаг: создаем перетаскиваемый элемент
В новом каталоге проекта создаем HTML-файл и помещаем в него базовый код веб-страницы. Также в этой папке сразу создаем файл с расширением .css и .js. И чтобы не забыть, ссылку на файл style.css вставляем между тегов , а ссылку src=»https://timeweb.cloud/tutorials/css-html/script.js» перед закрытием тега .
Теперь нужно создать перетаскиваемый элемент и целевую зону. Как мы уже упоминали выше, между тегами помещаем перетаскиваемый элемент под названием TASK и область, куда его скинем. Также обратите внимание, что нужно разрешить перемещение элементов, указав около атрибута draggable значение true. Чтобы запретить перетаскивание или задать поведение автоматически (по умолчанию), используйте команды: draggable=» false | auto»
DONE
Копируйте код в свой файл, затем сохраняйте и можете закрывать.
Второй шаг: стилизуем элементы
О том, как много возможностей предлагает каскадная таблица стилей 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 /> .dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
const dropzone = event.target;
dropzone.appendChild(draggableElement);
event
.dataTransfer
.clearData(); >
Применим метод preventDefault(), чтобы отменить действие браузера по умолчанию. Так события будут происходить при выполнении конкретных условий. Мы использовали три обработчика событий, которые добавляем в первом и втором в файле HTML.
draggable="true"
ondragstart="onDragStart(event);" >
draggable
ondragover="onDragOver(event);"
ondrop="onDrop(event);">
dropzone
Итоги
На нашем примере видно, как, используя HTML Drag and Drop , осуществить перемещение элементов на чистом языке JavaScript. Следуя этому алгоритму действий, можно переходить к реализации более масштабных проектов (а разместить их всегда можно на облачных серверах cloud.timeweb.com). Помните, что в разработке продуманный графический интерфейс выстраивает коммуникацию между пользователем и приложением/сайтом.
Источник
10 CSS & JavaScript Snippets for Creating Drag-and-Drop UIs
Drag-and-drop has been with us for decades. It helps us to get things done on desktops, mobile apps and operating systems. There’s both a simplicity and intuitiveness that make them one of the most universal UI features.
So it’s no wonder that drag-and-drop has invaded the web over the past few years. From uploading files in Dropbox to sorting our Trello boards – its usefulness has been proven repeatedly.
There are a number of creative ways we can implement these interfaces into our own designs. Let’s take a look at ten unique examples of drag-and-drop UI:
Learn the Basics by Ben Parker
Before you can go really in-depth with implementing drag-and-drop, it’s important to learn some fundamentals. That’s where this simple snippet that utilizes Angular can come in handy. It’s a basic exercise in dragging a square element from one side of the screen to the other. An alert pops up when you’re finished. Nothing fancy, but it could be useful for grasping the concepts involved.
See the Pen Angular Drag &Drop by Ben Parker
Draggable Panels by Ettrics
Speaking of Trello, the task management tracker’s implementation of drag-and-drop is incredibly useful. Here’s an example that stays pretty faithful to what makes Trello so cool. You can drag panels from column to column, and there’s an awesome color-changing effect when something is moved to a new spot.
Build Your Own Kaleidoscope? by Justin Windle
This is example is both quite breathtaking and a bit trippy. It utilizes HTML5 Canvas and some JavaScript to create a movement-aware kaleidoscope. But wait, there’s more! You can also drag an image into the UI, thus changing the image displayed within the kaleidoscope. All I can say is, “far out.”
See the Pen Kaleidoscope (Drag &Drop) by Justin Windle
Drag a Simple Page Element by Ben Kalsky
On our desktop or laptop computers, we sometimes want to move a specific element off to the side. It’s still in view – but out of the way of other, more important items. That’s exactly what this dead-simple jQuery button does for the web. Move it to anywhere on the screen for later viewing.
See the Pen Grab &Drag by Ben Kalsky
HTML5 Drag-and-Drop API by Acauã Montiel
Did you know that HTML5 has its own drag-and-drop API? I ask only because I had no clue. Here, it’s combined with some JavaScript to enable the swapping of squares. While this is a simple example, it shows the potential of tapping into the API.
See the Pen Drag and Drop HTML5 by Acauã Montiel
We often see drag-and-drop used with forms. A WordPress Plugin like Gravity Forms comes to mind, where fields can be added and repositioned quite intuitively. Here we have a form builder UI that uses HTML5 and Angular.js.
See the Pen Angular Drag-Drop FormBuilder by Lam Phuoc Thinh
Scalable Pixel Art by Will Boyd
Adding images via drag-and-drop is quite common. But, like the kaleidoscope above, this snippet provides a unique use case. You can drag an image into a specified div , and it creates CSS-based pixel art that can be scaled to up to 20x the original size. It also outputs CSS code to paste into your project – a good representation of how useful this UI can be.
Easily Add Events by Subodh Ghulaxe
The ability to rearrange data is a prime use of dragging. This calendar example shows how we can use the UI to place events on specific dates and even switch between dates, if necessary. Furthermore, it shows how implementing drag-and-drop can take the pain points out of common tasks.
It’s a Knockout by Safraz Razik
The file upload field has been around for years. But drag-and-drop makes it so much more user-friendly. Here we have a couple of example fields using Knockout.js. The first allows for dragging a single file, the other allowing for multiple uploads. But both offer a preview of the file, adding further visual confirmation to the UI.
This is one we don’t see very often. The scrollable container at the top of this snippet contains boxes that can be moved to another div down below. It shows that a scrollable interface can be quite usable in this type of scenario.
See the Pen Dragging Clones by Blake Bowen
Dragging You Towards a Better UI
There are several ways that a drag-and-drop UI can benefit the user-friendliness of your website. Hopefully, the examples above will provide you with some inspiration regarding how you can use this familiar feature to enhance your own projects.
Related Posts
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.
Источник