Drag & Drop is Super Simple
Tags: javascript, tutorial, uiweekly
Published: 2019-12-30 18:17:08

**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

```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

```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
```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](https://codesandbox.io/s/romantic-moore-zjngf) to play with the visual output.

---

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

[Detailed docs](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)


*Happy Coding*