Добавить Drag & Drop на сайт легко с Dragula

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

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

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

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

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

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

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

Вот один пример из документации GitHub о том, как целевые два (левый и правый) контейнеры:

 dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); 

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

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

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

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

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