Dragula

A presentation on the "Dragula" drag-n-drop library. Presented on November 4, 2015 at an AarhusJS meetup in Aarhus, Denmark.

Transcript

1. AarhusJS, november 2015 1
2. CHRIZTIAN STEINMEIER @GREYSTATE VOKSEVÆRK 2
3. DRAG 'N DROP? 3
5. INTERNT TOOL > Flytte kort mellem Backlog og Sprint > Tasks kan flyttes mellem kort > Kort og tasks kan sorteres 5
6. OKAY, HTML5 HAR draggable="true" 6
7. NIH 7
8. NIH 8
9. NIH 9
10. HTML5 DRAG 'N DROP <section draggable="true"> <!-- content --> </section> 10
11. HMM, HVAD ELLERS? > user-select: none; > cursor: move; > element.classList.add('is-dragging'); > Diverse events (dragstart, dragover, dragleave etc.) 11
12. ! " # ! 12
13. ENTER DRAGULA ! 13
14. BEVACQUA.GITHUB.IO/DRAGULA/ 14
16. SIMPEL INITIALISERING var sprint = document.getElementById('sprint-z'); var backlog = document.getElementById('backlog'); var drake = dragula([sprint, backlog]); 16
17. ZEPTO / JQUERY var containers = $('#sprint-z, #backlog').get(); var drake = dragula(containers); 17
18. NÆVNBARE OPTIONS > revertOnSpill / removeOnSpill > direction > moves > accepts 18
19. EVENTS > drag > drop > cancel > remove > etc. 19
20. ! “MEN HVAD MED X???” ➡ HVOR X ER { ANGULAR, METEOR, EMBER ETC. } 20
21. ANGULAR + REACT > github.com/bevacqua/angular-dragula > github.com/bevacqua/react-dragula 21
22. UDFORDRINGER? > options.mirrorContainer > Persistence _ 22
23. ❔ ❓ ❔ ❔ ❓ ❔ 23
24. TAK FOR NU! contact = ✉: "chriztian@vokseverk.dk" ": /(github|speakerdeck|twitter)\.com\/greystate/i 24