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

Търсите безплатна библиотека дръпнете и пуснете функции? Тогава Dragula е единственият ресурс, от който се нуждаете.

Този безплатен скрипт ви позволява добавете функции за плъзгане и пускане за всеки елемент на страницата си. Това включва поддръжка на рамките React & AngularJS, заедно с ванилия JavaScript.

Драгула е супер лесна за настройка и идва с нея куп персонализирани тригери за поведение на потребителите. Това означава, че можете да изстрелвате свои собствени функции, след като потребителят изтегли елемент, кликне върху даден елемент или пренарежда всяка част от страницата.

Ако погледнете демонстрацията на живо, ще откриете няколко кодови фрагмента, заедно с използваеми образци.

Настройката на Драгула изисква само един JavaScript файл за да работи. Въпреки това, допълнителните опции могат да станат малко объркващи.

Например, да кажем, че имате два контейнера, #наляво и #right, които искате да поддържате опции за плъзгане. Ще трябва да го направите ръчно добавете тези контейнери към функцията Драгула за поддържане на методите за плъзгане и пускане.

Ако нямате солидно схващане за основите на разработката на предния край, ще се опитате да използвате Драгула. Но репо GitHub има много страхотни примери, които можете да следвате заедно и дори кодови фрагменти, които можете да копирате.

Ето един пример от документа GitHub за това как да насочете се към двата контейнера (ляв и десен):

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

Обърнете внимание, ако погледнете по-нататък страницата GitHub, която ще намерите огромен списък от опции можете да преминете към тази функция.

Можеш да избираш дали да копирате или премествате елементи, кой контейнер (и) поддържа (т) изтеглените елементи и дори функции за обратно извикване които работят чрез различни поведения на потребителите, като:

• Завиване над контейнер
• Първоначално събитие за кликване и влачене
• Пуснете събитие
• Отпадане на елемент извън границите
• Клониране на елемент / контейнер чрез плъзгане

Тази библиотека ще предприеме някаква първоначална работа но ако сте запознати с JavaScript, той трябва да е безсмислен.

Погледни през демонстрационната страница виж как работи и към получите няколко идеи за извадка от кодове. Драгула е масивна библиотека и вероятно е най-добрият скрипт с отворен код дръпнете и пуснете, с най-широка гама от персонализиране.