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.


HTML

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

  <body>
    <div style="text-align: center">
      <h3>Drag & Drop</h3>
    </div>
    <div id="app">
      <div>
        <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>
      </div>

      <div>
        <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>
        </ul>
      </div>
    </div>

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



Javascript

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) {
  e.preventDefault();
  beforeElement = this;
  this.className += " dropzone";
}

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

function dragLeave() {
  beforeElement = null;
  this.classList.remove("dropzone");
}

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

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

css

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)