JSFiddle - React, Tailwind, and code Playground

by JessicaNorbach

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragenter="return false;" ondragover="allowDrop(event)"></div>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div4" ondrop="drop(event)" ondragenter="return false;" ondragover="allowDrop(event)"></div>

CSS

#div1, #div2, #div3, #div4 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

JavaScript

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

function dragStart(ev) {

  ev.dataTransfer.setData('Text', ev.target.id);
}

function drop(ev) {
  ev.preventDefault();  
  var drag_data = ev.dataTransfer.getData('Text');
  if(ev.target.tagName == 'DIV') {
  ev.target.appendChild(document.getElementById(drag_data));
}
}