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)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.