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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: сделать элементы на вашем сайте перетаскиваемыми с помощью Draggabilly.js

Если вы посмотрите на живое демо Вы найдете несколько фрагментов кода вместе с полезными примерами.

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

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

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

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

Dragula ([document.querySelector(‘#left’), document.querySelector(‘#right’)]);

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

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

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

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

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