JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div id="div1"></div>

<div draggable="true">
  Drag me
</div>

CSS

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

$(document).on('dragstart', '[draggable="true"]', function (ev) {
	var id = 'dragging-'+(new Date()).getTime();
  ev.target.id = id;
  ev.dataTransfer = ev.dataTransfer || ev.originalEvent.dataTransfer;
  ev.dataTransfer.setData("text", id);
});

$(document)
  .on('dragover', function(ev) {
    ev.preventDefault();
  })
  .on('drop', function(ev) {
    ev.preventDefault();
    ev.dataTransfer = ev.dataTransfer || ev.originalEvent.dataTransfer;
    var data = ev.dataTransfer.getData("text");
    
    if ($(ev.target).find('body').length) {
    	$(ev.target).find('body').get(0).appendChild(document.getElementById(data));
      return;
    }

		ev.target.appendChild(document.getElementById(data));
  });