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.
Happy Coding
Top comments (0)