DEV Community

Cover image for Drag & Drop is Super Simple
Vishal Gupta
Vishal Gupta

Posted on • Updated on

Drag & Drop is Super Simple

There are lot of applications on internet which gives drag and drop functionality, it seems tricky but it is super simple to implement.

It is also a very popular interview question for coding round but the implementation is quite simple and interesting.


<!DOCTYPE html>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <div style="text-align: center">
      <h3>Drag & Drop</h3>
    <div id="app">
        <ul class="listHolder">
          <li class="listElement" draggable="true">1</li>
          <li class="listElement" draggable="true">2</li>
          <li class="listElement" draggable="true">3</li>
          <li class="listElement" draggable="true">4</li>

        <ul class="listHolder">
          <li class="listElement" draggable="true">5</li>
          <li class="listElement" draggable="true">6</li>
          <li class="listElement" draggable="true">7</li>
          <li class="listElement" draggable="true">8</li>

    <script src="src/index.js"></script>


import "./styles.css";

var listHolders = document.getElementsByClassName("listHolder");
var listElems = document.getElementsByClassName("listElement");
var selectedElem = null;
var beforeElement = null;

for (const elem of listElems) {
  elem.addEventListener("dragstart", dragStart);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);

for (const holder of listHolders) {
  holder.addEventListener("dragenter", dragEnter);
  holder.addEventListener("dragleave", dragLeave);
  holder.addEventListener("drop", drop);

function dragStart(e) {
  selectedElem = this;
  this.className += " hold";
  setTimeout(() => {
    this.className = "remove";
  }, 0);

function dragOver(e) {
  beforeElement = this;
  this.className += " dropzone";

function dragEnter() {
  this.className += " dropzone";

function dragLeave() {
  beforeElement = null;

function drop() {
  this.className = "listHolder";
  if (this.children.length && beforeElement) {
  } else {
  beforeElement.className = "listElement";
  selectedElem = null;

function dragEnd() {
  this.className = "listElement";


body {
  font-family: sans-serif;

.listHolder {
  padding: 10px;
  border: #000 solid 1px;
  background: mediumslateblue;
  min-width: 100px;
  min-height: 100px;

ul {
  list-style-type: none;

#app {
  display: flex;
  justify-content: space-between;

.listElement {
  padding: 10px;
  background: white;
  border: #000 solid 1px;
  margin-top: 5px;

.dropzone {
  border: #000 dashed 2px;

.remove {
  display: none;

.hold {
  border: red solid 3px;

Simple implementation

CodeSandbox Example to play with the visual output.

You can fork it for making your own version of drag drop.

Detailed docs

Happy Coding

Top comments (0)