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)