Adăugați Drag & Drop pe site cu ușurință cu Dragula

Căutați o bibliotecă gratuită trageți caracteristicile drag & drop? Atunci Dragula este singura resursă de care veți avea nevoie.

Acest script gratuit vă permite adăugați caracteristici drag & drop pentru orice element de pe pagina dvs.. Aceasta include suport pentru cadrele React & AngularJS, împreună cu JavaScript de vanilie.

Dragula este foarte ușor de configurat și vine cu o grămadă de declanșatoare personalizate pentru comportamentul utilizatorilor. Aceasta înseamnă că vă puteți declanșa propriile funcții după ce utilizatorul trage un element, dă clic pe un element sau rearanjează orice parte a paginii.

Dacă luați o privire la demo-ul live, veți găsi cateva fragmente de cod, impreuna cu utilizabile.

Setarea Dragula necesită doar un singur fișier JavaScript pentru a-l face să funcționeze. Deși, opțiunile suplimentare pot deveni puțin confuze.

De exemplu, să presupunem că aveți două containere, #stânga și #dreapta, că doriți să sprijiniți obiectele draggable. Va trebui adăugați manual aceste containere la funcția Dragula pentru a sprijini metodele drag & drop.

Dacă nu aveți o înțelegere solidă a fundamentelor dezvoltării front-end, atunci veți încerca să utilizați Dragula. Dar, repo-ul GitHub are multe exemple minunate pe care le puteți urmări împreună cu și chiar fragmente de cod pe care le puteți copia.

Iată o mostră din docurile GitHub pentru cum să vizați cele două containere (stânga și dreapta):

 dragula ([document.querySelector ('# stânga'), document.querySelector ('# dreapta')]); 

Rețineți dacă căutați mai departe pagina GitHub pe care o veți găsi o listă uriașă de opțiuni puteți trece la această funcție.

Tu poti alege dacă doriți să copiați sau să mutați elemente, care container (i) acceptă elementele trase și chiar funcții de apel invers care funcționează prin comportamente diferite ale utilizatorilor, cum ar fi:

• Trecând peste un container
• Evenimentul inițial de clic și tragere
• Eliminați evenimentul
• Aruncarea unui element în afara limitelor
• Clonarea unui element / container prin glisare

Această bibliotecă va avea nevoie de o muncă inițială dar dacă sunteți familiarizat cu JavaScript ar trebui să fie un nu-brainer.

Priviți pagina demo la Vezi cum funcționează și a obțineți câteva idei de eșantion de cod. Dragula este o bibliotecă masivă și probabil este cel mai bun script open source trageți drag & drop, cu cea mai largă gamă de personalizare.