JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<img id="1" src="/" draggable="true" ondragstart="drag(event)" alt="Image 1"/>
<img id="2" src="/" draggable="true" ondragstart="drag(event)" alt="Image 2"/>
<img id="3" src="/" draggable="true" ondragstart="drag(event)" alt="Image 3"/>
<img id="4" src="/" draggable="true" ondragstart="drag(event)" alt="Image 4"/>
<img id="5" src="/" draggable="true" ondragstart="drag(event)" alt="Image 5"/>

<div id="playlist" ondrop="drop(event)" ondragover="allowDrop(event)">
    
</div>

CSS

html,
body {
    overflow-x: hidden;
    padding: 8px;
}
#playlist {
    position: absolute;
    top: 150px;
    left: 20px;
    width: 817px;
    height: 116px;
    padding: 15px 0 0 15px;
    background-color:#e5e5e5;
}
#playlist img {
    margin: 5px;
    opacity: 0.9;
}
img {
    background: #252525;
    width: 150px;
    height: 90px;
    margin: 5px;
}

JavaScript

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data).cloneNode(true));
}