Lisää vetämällä ja pudottamalla verkkosivulle helposti Dragulan avulla

Etsit ilmaista kirjastoa käsittele vetämisen ja pudottamisen ominaisuuksia? Sitten Dragula on ainoa resurssi, jota tarvitset.

Tämä ilmainen skripti antaa sinulle mahdollisuuden lisää vetämällä ja pudottamalla ominaisuuksia sivun mille tahansa elementille. Tähän sisältyy tuki React & AngularJS-kehyksille sekä vanilja-JavaScript.

Dragula on erittäin helppo asentaa ja sen mukana tulee joukko mukautettuja laukaisimia käyttäjän käyttäytymiseen. Tämä tarkoittaa, että voit tulostaa omat toiminnot sen jälkeen, kun käyttäjä vetää kohteen, napsauttaa kohdetta tai järjestää minkä tahansa sivun osan.

Jos otat katsella live-demoa, löydät sen muutama koodinpätkä, kera käyttökelpoiset näytteet.

Dragulan asennus vaatii vain yhden JavaScript-tiedoston saada se toimimaan. Vaikka lisävaihtoehdot voivat hieman hämmentää.

Oletetaan esimerkiksi, että sinulla on kaksi konttia, #left ja #right, että haluat tukea vedettäviä kohteita. Sinun täytyy lisää nämä säiliöt manuaalisesti Dragula-toimintoon tukemaan vedä- ja pudotusmenetelmiä.

Jos sinulla ei ole kiinteää käsitystä etupään kehitystyön perusteista, sinun on vaikea käyttää Dragulaa. GitHub-repolla on kuitenkin paljon mahtavia esimerkkejä, joita voit seurata ja jopa voit kopioida koodinpätkät.

Tässä on yksi näyte GitHub-dokumenteista kohdista kaksi (vasenta ja oikeaa) konttia:

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

Huomaa, että katsot tarkemmin GitHub-sivulta valtava luettelo vaihtoehdoista voit siirtyä tähän toimintoon.

Voit valita kopioida tai siirtää kohteita, joka säiliö (t) tukee vetämiä kohteita ja jopa soittopyyntötoiminnot jotka toimivat eri käyttäytymismalleilla, kuten:

• Säilytys säiliön yli
• Alkuperäinen napsautus- ja vetotapahtuma
• Drop-tapahtuma
• Elementin pudottaminen rajojen ulkopuolelta
• Elementin / säiliön kloonaus vetämällä

Tämä kirjasto ottaa jonkin verran alustavaa työtä mutta jos olet perehtynyt JavaScriptiin, sen pitäisi olla ei-brainer.

Katso demo-sivulta Katso kuinka se toimii ja saat muutaman koodinäytteen. Dragula on massiivinen kirjasto ja se on luultavasti paras avoimen lähdekoodin komentosarja käsittele vetämällä ja pudottamalla mahdollisimman monenlaisia ​​räätälöintejä.