JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>Drag and Drop</h1>

  <div ondrop="drop(this, event)" ondragenter="return false"
                                  ondragover="return false">
   <p>Good</p>
  </div>

  <div ondrop="drop(this, event)" ondragenter="return false"
                                  ondragover="return false">
   <p>Bad</p>
  </div>

  <p>
   <img src="spam.gif" id=spam alt="Spam" ondragstart="drag(this, event)">
   <img src="egg.gif" id=egg alt="Egg" ondragstart="drag(this, event)">
   <img src="cat.png" id=cat alt="Cat" ondragstart="drag(this, event)">
  </p>

CSS

img { height: 4em; }
   div { margin: 1em 2em; border: black solid; text-align: center;
         height: 9em; width: 12em; float: left; }
   p { clear: left; }

JavaScript

function drag(target, e) {
     e.dataTransfer.setData('Text', target.id);
   }

   function drop(target, e) {
     var id = e.dataTransfer.getData('Text');
     target.appendChild(document.getElementById(id));
     e.preventDefault();
   }