drag-and-drop list board with Javascript

YvonneDev
3 min readOct 26, 2020

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

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*