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

Шукаю безкоштовну бібліотеку функції перетягування і падіння? Потім Драгула це єдиний ресурс, який вам знадобиться.

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

Драгула дуже легко налаштувати, і вона поставляється з купу користувальницьких тригерів для поведінки користувачів. Це означає, що ви можете відкривати власні функції після того, як користувач перетягує елемент, натискає на елемент або переставляє будь-яку частину сторінки.

Якщо ви подивитеся на демо-версію, яку ви знайдете кілька фрагментів коду, разом з придатні для використання зразки.

Налаштування Драгули потрібно лише один файл JavaScript щоб він працював. Хоча, додаткові опції можуть трохи заплутати.

Наприклад, припустимо, що у вас є дві контейнери, #left і # right, які потрібно підтримувати перетягуванням елементів. Вам потрібно вручну додати ці контейнери до функції Dragula для підтримки методів перетягування.

Якщо у вас немає чіткого розуміння фундаментальних принципів розвитку фронт-енд-енд, то ви будете намагатися використовувати Драгулу. Але в репо GitHub є багато великі приклади ви можете слідувати разом з і навіть фрагменти коду, які можна скопіювати.

Ось один зразок з документів GitHub, як це зробити націлюйте на дві (ліву та праву) контейнери:

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

Зверніть увагу, якщо ви подивіться на сторінку GitHub, яку ви знайдете величезний список варіантів Ви можете перейти до цієї функції.

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

Наведення на контейнер
Початкова подія кліку та перетягування
Відміна події
Видалення елемента за межі
Клонування елемента / контейнера шляхом перетягування

Ця бібліотека піде початкова робота але якщо ви знайомі з JavaScript, це має бути непросто.

Перегляньте демонстраційну сторінку Дивись, як це працює і до отримати кілька ідей зразків коду. Драгула - це масивна бібліотека, і це, мабуть, найкращий сценарій з відкритим вихідним кодом ручка перетягування і падіння, з найширшим діапазоном налаштування.