Как создать Drag-and-drop в JavaScript

javascript

Придя впервые к технологии Drag-and-drop столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

  • Метод создания Drag-and-drop эффектов.
  • Практическое применение полученных знаний для создание сортировки при помощи Drag-and-drop.

РЕКОМЕНДУЕМ:
Как написать безопасный код на JavaScript

Создание эффекта Drag-and-drop в JavaScript

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании Drag-and-drop первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable=’true’.

На первом этапе я хочу показать сам процесс, а после мы его распространим на все объекты. Мы сейчас работаем в JavaScript и как вам известно, в браузере существуют различные события, к которым мы можем привязать свои последовательности действий. Давайте разберем необходимые события для создания Drag-and-drop:

  • dragstart — происходит, когда пользователь начинает перетаскивать элемент.
  • drag — происходит, когда элемент перетаскивается.
  • dragend — происходит, когда пользователь закончил перетаскивание элемента.
  • dragenter — происходит, когда перетаскиваемый элемент попадает в целевой объект.
  • dragleave — происходит, когда перетаскиваемый элемент покидает целевой объект.
  • dragover — происходит, когда перетаскиваемый элемент находится над целью.
  • drop — происходит, когда перетаскиваемый элемент падает на целевой объект.

Теперь очень важная информация! События делятся на две группы. Для перемещаемого элемента (тот кого мы перетаскиваем): dragstart, Drag, Dragend. Для принимающего элемента (куда перетаскиваем): Dragenter, Dragleave, Dragover, Drop. И эти события не могут работать наоборот, но они могут работать друг без друга.

К примеру: Необходимо переместить объект и оставить его там, где мы отпустили кнопку мыши. Эта задача не требует принимающей части.

Бесспорно, пример сделан на коленке, но он замечательно иллюстрирует не обязательность принимающего объекта.

Я считаю примеры с отдельными событиями ни к чему, так как если в строчке d1.addEventListener('dragstart',function() { вы замените 'dragstart' на любое другое событие, сами сможете с ним поиграть и получить интересные результаты. Давайте даже так, поиграйте и то что вам показалось необычным и интересным покажите в комментариях, так каждый узнает много нового и сам сможет это повторить.

РЕКОМЕНДУЕМ:
Регулярные выражения в JavaScript

Не работает Drop в Drag-and-drop в JavaScript

Когда вы попробуете все события, вы обнаружите что drop не работает. Это разработчики данного метода делают атата тем, кто решил «И это всё… Хух, ерунда».

Ну тут все просто, перед событием drop необходимо на этот же элемент повесить событие

Это примите как факт, без него работать не будет.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий