Pridėti Drag & Drop į svetainę lengvai su Dragula

Ieškote nemokamos bibliotekos tvarkykite vilkimo ir nuleidimo funkcijas? Tada Dragula yra vienintelis reikalingas išteklius.

Šis nemokamas scenarijus leidžia jums pridėti bet kurio puslapio elemento „drag & drop“ funkcijas. Tai apima paramą „React & AngularJS“ sistemoms, kartu su vanilės „JavaScript“.

„Dragula“ yra labai lengva įrengti ir su ja vartotojo elgsenai pritaikytų pasirinktinių trigerių krūva. Tai reiškia, kad po to, kai vartotojas nuvilkia elementą, spustelėjęs elementą arba pertvarko bet kurią puslapio dalį, galite užsidegti savo funkcijas.

Jei žiūrite į tiesioginį demo, kurį rasite keli kodo fragmentai, kartu su naudoti pavyzdžiai.

„Dragula“ sąranka reikia tik vieno „JavaScript“ failo gauti jį dirbti. Nors papildomos parinktys gali šiek tiek painioti.

Pavyzdžiui, tarkime, kad turite du konteinerius, #left ir #right, kad norite palaikyti draggable elementus. Jums reikės rankiniu būdu įdėkite šiuos konteinerius į „Dragula“ funkciją palaikyti „drag & drop“ metodus.

Jei neturite tvirtos informacijos apie „front-end“ plėtros pagrindus, tuomet jums bus sunku naudotis „Dragula“. Tačiau „GitHub“ repo turi daug puikūs pavyzdžiai, kuriuos galite sekti kartu Ir netgi kodo fragmentus, kuriuos galite kopijuoti.

Štai vienas iš „GitHub“ dokumentų pavyzdys nukreipti du (kairiojo ir dešiniojo) konteinerius:

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

Atkreipkite dėmesį, jei žiūri toliau į „GitHub“ puslapį, kurį rasite didžiulis variantų sąrašas galite pereiti prie šios funkcijos.

Jūs galite pasirinkti ar kopijuoti ar perkelti elementus, kuris konteineris (-ai) palaiko vilktus elementus Ir netgi atgalinio ryšio funkcijos tai veikia skirtingu vartotojų elgesiu, pavyzdžiui:

• Virš virš konteinerio
• Pradinis paspaudimų ir vilkimo įvykis
• Drop įvykis
• Nukritus elementą iš ribų
• Elemento / konteinerio klonavimas vilkdami

Ši biblioteka pradės tam tikrą pradinį darbą bet jei esate susipažinę su „JavaScript“, jis turėtų būti ne-protingas.

Žiūrėkite demo puslapį į pamatyti, kaip jis veikia ir gauti keletą kodo pavyzdžių. Dragula yra didžiulė biblioteka ir tikriausiai tai geriausias atviro kodo scenarijus tvarkykite „drag & drop“, naudodami plačiausią pritaikymo sritį.