JSFiddle - React, Tailwind, and code Playground

by acodesmith

HTML

<img src="http://wideopentech.com/images/logo.png" alt="Drag Me" />

<div id="drop"></div>

CSS

#drop {
  min-height: 100px;
  width: 500px;
  border: 3px dashed #ccc;
  margin: 10px;
  padding: 10px;
}
p {
  margin: 3px 0;
}

JavaScript

var drop = document.querySelector('#drop');

// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function(event) {
    // stops the browser from redirecting off to the text.
    if (event.preventDefault) {
        event.preventDefault();
    }

    this.innerHTML += '<p>' + event.dataTransfer.getData('Text') + '</p>';

    alert("drop");

    return false;
});

function cancel(event) {
    if (event.preventDefault) {
        event.preventDefault();
    }
    return false;
}