Интернет магазин шабонов
Форма входа

Статьи сайта

Как добавить Drag & Drop на сайт с помощью Dragula



Ищете бесплатную библиотеку для обработки функций перетаскивания? Тогда Dragula - единственный ресурс, в котором вы нуждаетесь.

Этот бесплатный скрипт позволяет добавлять функции перетаскивания для любого элемента на вашей странице. Он включает поддержку React и AngularJS фреймворки вместе с JavaScript.

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



Если вы посмотрите живую демонстрацию, то вы найдете несколько фрагментов кода вместе с полезными образцами.

Для установки Dragula требуется только один файл JavaScript, чтобы все работало. Хотя, дополнительные опции могут немного запутать.

Например, предположим, что у вас есть два контейнера: #left и #right, которые вы хотите поддерживать перетаскиваемые элементы. Вам нужно будет вручную добавить эти контейнеры в функцию Dragula для поддержки методов drag & drop.

Если у вас нет четкого понимания основ front-end разработки, вы будете бороться с использованием Dragula. Но в репозитории GitHub есть много замечательных примеров, которые вы можете использовать вместе с фрагментами кода, которые вы можете скопировать.

Вот один образец из документов GitHub для того, как настроить два контейнера (#left и #right):
Код
dragula([document.querySelector('#left'), document.querySelector('#right')]);


Обратите внимание, что если вы посмотрите дальше на странице GitHub, вы найдете огромный список опций, которые cможете передать этой функции.

Вы можете выбрать, копировать или перемещать элементы, какие контейнеры поддерживают перетаскиваемые элементы и даже функции обратного вызова, которые работают с помощью разных пользовательских действий, таких как:

  • Наведение на контейнер
  • Начальное событие click & drag
  • Событие Drop
  • Удаление элемента за пределы
  • Клонирование элемента / контейнера путем перетаскивания

Эта библиотека возьмет на себя какую-то начальную работу, но если вы знакомы с JavaScript, это должно быть без проблем.

Просмотрите демонстрационную страницу , чтобы увидеть, как она работает, и получите несколько примеров кода. Dragula - обширная библиотека, и это, вероятно, лучший скрипт с открытым исходным кодом для обработки drag & drop с широким диапазоном настроек.



Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.