How to drag & drop, swap, add and delete elements | Vanilla Js
This video Tutorial guides you on how to perform drag and drop operations on elements within a container as well as take it a step forward and implement features to swap, add and delete elements in the container. This video will enhance your knowledge in vanilla javascript and give you in-depth information regarding event listeners and how to make use of them.
Github code: https://github.com/xplodivity/drag-dr...
0:00 - Intro
0:58 - Setup
3:32 - adding initial styling
5:44 - making the grid & adding selectors
15:05 - adding image selectors
23:50 - initial drag event listeners
26:20 - displaying image
28:55 - adding delete icon
35:41 - adding all drag listeners
39:25 - adding drag functionality
46:30 - swap functionality
54:09 - fixing a bug
56:48 - Final demo + end
