JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="drag" draggable="true">drag me</div>
<div id="drop">drop here.</div>

CSS

#drag {
  border: 1px solid black;
  margin: 3px;
  padding: 6px;
}
#drop {
  border: 1px dashed red;
  margin: 3px;
  padding: 6px;
}

JavaScript

$(function() {
    source = $('#drag');
    dest = $('#drop');

    source.bind('dragstart', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        dt.setData('text/plain', 'Dropped!');
        return true;
    });

    dest.bind('dragover', function(ev) {
        ev.preventDefault();
        return false;
    });

    dest.bind('drop', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        var text = dt.getData('text/plain');
        dest.text(text);
        ev.stopPropagation();
        return false;
    });
});