drag-and-drop list board with Javascript

 

Features:

drag and drop with HTML drag and drop API

add& delete items 

scroll bar stylish

CODE Github

DEMO

HTML

Four columns in the container. 

First one is "backlog". The unordered list put the list generated or from localStorage.

ondragenter ,ondragover and ondrop events.

Add button show input box,or hide if save button clicked.

The other three are same pattern.

CSS

add the "over" classname for different background color

custom scrollbar from css tricks 

For responsive screen styles. 

JAVASCRIPT

select all the DOM and initialize the variables.

drag() aims the target of item.

when dragged item enter the new column,add the "over" class and pass the current column index.

When drop the item,the background go back to normal and the dragged item to new column. Then rebuildArrays()

loop the each array and create the new array to save .

if refresh the page, grab the data from localStorage.

Get the saved column parsed from object.

update the columns and save to localStorage

Create the list and trigger the ondragstart  and onfocusout.

move the item when drag finish.

new item append to column.