Drag and Drop Board

The drag-and-drop board was created with the help of the HTML5 Drag and Drop API. In order for the task to have a draggable effect, each task element is assigned with the draggable attribute. Dragging tasks from one list to another (to-do, in-progress, done task lists) is done using the dragstart, dragend, and dragover events.

The Touch API (touchstart, touchend, touchmove events) was used to simulate the draggable effect on the mobile view. Tasks that are added to the board are stored in the local storage. There can be a maximum of twenty tasks on the board. The task text must have more than 3 characters and less than 100 characters.