Pievienot Drag & Drop uz vietni viegli ar Dragula

Meklējat bezmaksas bibliotēku rīkoties ar vilkšanas un nomešanas funkcijām? Pēc tam Dragula ir vienīgais resurss, kas jums būs nepieciešams.

Šis bezmaksas skripts ļauj jums pievienojiet jebkura lapas elementa vilkšanas un nomešanas funkcijas. Tas ietver atbalstu React & AngularJS sistēmām, kā arī vaniļas JavaScript.

Dragula ir ļoti viegli uzstādīt un tas nāk ar ķekars pielāgotus lietotāja darbības paradumus. Tas nozīmē, ka pēc tam, kad lietotājs velk objektu, noklikšķina uz vienuma vai pārkārto jebkuru lapas daļu, varat aizdegt savas funkcijas..

Ja jūs skatāties uz dzīvo demonstrāciju, ko atradīsiet daži koda fragmenti, kopā ar izmantojamie paraugi.

Dragulas iestatīšana nepieciešams tikai viens JavaScript fails lai to paveiktu. Lai gan papildu iespējas var nedaudz mulsināt.

Piemēram, pieņemsim, ka jums ir divi konteineri, #left un #pa labi, ka vēlaties atbalstīt velcietos vienumus. Jums būs nepieciešams manuāli pievienojiet šos konteinerus Dragula funkcijai lai atbalstītu vilkšanas un nomešanas metodes.

Ja jums nav stabila priekšstata par pamatvirziena attīstības pamatiem, tad jums būs grūti izmantot Dragula. Taču GitHub repo ir daudz jūs varat sekot līdzi lieliskiem piemēriem un pat koda fragmentus, kurus varat kopēt.

Lūk, viens GitHub dokumentu paraugs mērķēt abus (kreisos un labos) konteinerus:

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

Ņemiet vērā, ka skatāties tālāk GitHub lapā, kuru atradīsiet milzīgs iespēju saraksts jūs varat pāriet uz šo funkciju.

Tu vari izvēlēties vai kopēt vai pārvietot vienumus, kurš (-i) konteiners (-i) atbalsta vilktās preces un pat atzvanīšanas funkcijas kas darbojas, izmantojot dažādas lietotāja darbības, piemēram:

• Pārvietojas virs konteinera
• Sākotnējais klikšķu un vilkšanas notikums
• Drop notikums
• Elementa nomešana no robežām
• Elementa / konteinera klonēšana, velkot

Šī bibliotēka veiks sākotnējo darbu bet, ja jūs esat iepazinušies ar JavaScript, tam vajadzētu būt bezjūtīgam.

Skatiet demonstrācijas lapu uz Skaties kā tas strādā un uz iegūt dažas koda paraugu idejas. Dragula ir masīva bibliotēka, un, iespējams, tas ir labākais atklātā pirmkoda skripts rokturi velciet un nometiet ar visplašāko pielāgošanas diapazonu.