Add Dragula-val a Drag & Drop-hoz

Egy ingyenes könyvtár keres kezelje a drag and drop funkciókat? Azután Dragula az egyetlen erőforrás, amire szüksége lesz.

Ez az ingyenes szkript lehetővé teszi az oldal bármely elemére húzza a drag and drop funkciókat. Ez magában foglalja a React & AngularJS keretrendszerek támogatását, valamint a vanília JavaScript-t.

A Dragula rendkívül könnyen beállítható, és vele együtt van egy csomó egyéni trigger a felhasználói viselkedéshez. Ez azt jelenti, hogy a felhasználó húz egy elemet, rákattint egy elemre, vagy átrendezheti az oldal bármely részét..

Ha megpillantja az élő demót, amit talál néhány kódrészlet, együtt használható minták.

A Dragula beállítás csak egy JavaScript-fájlt igényel dolgozni. Bár az extra lehetőségek kissé zavaróak lehetnek.

Tegyük fel például, hogy két tárolóed van, #balra és #jobb, támogatni kell a draggable elemeket. Meg kell manuálisan adjuk hozzá ezeket a tartályokat a Dragula funkcióhoz a drag and drop módszerek támogatása.

Ha nincs szilárd megértése a front-end fejlesztés alapjairól, akkor a Dragula használatával küzd. De a GitHub repo rengeteg nagyszerű példák, amiket követhetsz sőt még kódrészleteket másolhat.

Itt van egy minta a GitHub dokumentumokból, hogy hogyan célozza meg a két (bal és jobb) tartályt:

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

Ne feledje, ha a GitHub oldalain további információkat talál hatalmas lista a lehetőségekről átadhatja ezt a funkciót.

Választhatsz elemeket másolni vagy áthelyezni, melyik tartály (ok) támogatják a húzott elemeket sőt még visszahívási funkciók a különböző felhasználói magatartásokon keresztül működik:

• Lebegett egy tartály felett
• Kezdeti kattintás és húzás esemény
• Csepp esemény
• Elem elhagyása a határokon kívül
• Elem / tartály klónozása húzással

Ez a könyvtár néhány kezdeti munkát fog tenni de ha ismeri a JavaScriptet, akkor nem agya.

Nézze át a bemutató oldalt hogyan működik és a kap néhány kódmintát. Dragula hatalmas könyvtár, és valószínűleg a legjobb nyílt forráskódú szkript a legszélesebb körű testreszabással kezelje a drag & drop funkciót.