Как создать перетаскиваемый элемент

Как Создать Перетаскиваемый Элемент (1)

Что нужно знать про 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 задачи:

  1. Определяемся, что и куда будем перетаскивать (draggable element и dropzone).
  2. После чего решаем, что именно будет происходить с перетаскиваемым элементом.

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

Обзор событий

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

  1. Dragstart – это событие срабатывает на старте перетаскивания элемента, как только его зажимает мышь.
  2. Dragenter – сработает при входе перетаскиваемого элемента в целевую область (объект).
  3. Dragover – отследить событие Dragover можно в момент, когда перетаскиваемый элемент находится в зоне целевого объекта, но еще не отпущен.
  4. Dragleave – означает выход перетаскиваемого элемента из целевого объекта, при этом клавиша мыши все еще зажата.
  5. Drag – это событие происходит на протяжении всего времени, пока элемент в процессе перетаскивания.
  6. Drop – если происходит данное событие, значит перетаскиваемый элемент «упал» при отпуске зажатой клавиши.
  7. 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-элементу и целевой зоне принадлежат разные события.

В нашем проекте используются основные обработчики событий:

  1. Обработчик событий ondragstart срабатывает при возникновении события dragstart с перетаскиваемым элементом.
  2. Как мы писали выше, событие dragover относится к dropzone. Оно срабатывает при перемещении элемента в целевой зоне.
  3. Обработчик 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. Следуя этому алгоритму действий, можно переходить к реализации более масштабных проектов (а разместить их всегда можно на облачных серверах cloud.timeweb.com). Помните, что в разработке продуманный графический интерфейс выстраивает коммуникацию между пользователем и приложением/сайтом.

Telegram
VK
Скопировать ссылку
Как использовать Axios в React
Как использовать Axios в React
Как пользоваться SSH
Как пользоваться SSH

Зарегистрируйтесь и начните пользоваться
сервисами Timeweb Cloud прямо сейчас

15 лет опыта
Сосредоточьтесь на своей работе: об остальном позаботимся мы
165 000 клиентов
Нам доверяют частные лица и компании, от небольших фирм до корпораций
Поддержка 24/7
100+ специалистов поддержки, готовых помочь в чате, тикете и по телефону