Open Source Kanban Drag and Drop Design Template

Demo Code

This drag and drop layout is inspired by Trello, Google Keep, Invision and @aaronstump.

How it works

This simple drag and drop layout has no dependencies other than Dragula, an awesome drag and drop JavaScript plugin which you can find here.

Each .drag-inner-list column has an id which lets Dragula know that it is a drag and drop container. Every child element within that container is draggable!

After we drag an item (.drag-item) we temporarily add a class is-moved to the dragged item which changes it’s background color depending on which colummn it has been dragged to. Be sure to checkout the JavaScript code to get a more detailed picture of what’s happening.