JSFiddle - React, Tailwind, and code Playground

by mvasko

HTML

<div id="menu">
    <div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)">
    </div>
</div>
<div id="content">
    <img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="50" height="50"
</div>

CSS

#menu{
    height:200px;
    width:100px;
    background-color:blue;
    float:left;
}
#content{
    height:200px;
    width:400px;
    background-color:red;
    float:left;
}
#div1 {
    width:50px;
    height:50px;
    border:1px solid #aaaaaa;
}

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));
}