JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="demo">
  <div class="source-elements">
    <div class="ex-one draggable copy">
      Ex One
    </div>
    <div class="ex-two draggable copy">
      Ex Two
    </div>
    <div class="ex-three draggable copy">
      Ex Three
    </div>
  </div>
  <div class="drop-page">
    
  </div>
</div>

CSS

div {
  display: block;
  border: solid 1px gray;
  margin: 4px;
  padding: 8px;
}

JavaScript

function handleCopyDragStart (e) {
  console.log('drag start on ', e);
  e.dataTransfer.dropEffect = "copy";
  e.dataTransfer.setData('text/html', srcElement);
}

function handleMoveDragStart (e) {
  console.log('drag start on ', e);
  e.dataTransfer.dropEffect = "move";
  e.dataTransfer.setData('text/html', e.target.innerHTML);
}

function handleDragOver (e) {
	e.preventDefault();
//  e.stopImmediatePropagation();
//	console.log('handle over ', e, e.dataTransfer.dropEffect);
  console.log('handle over ', e, e.dataTransfer.getData('text/html'));

}

function handleDropOutside (e) {
	e.preventDefault();
  e.stopImmediatePropagation();
  console.log('handle drop outside', e, e.dataTransfer.getData('text/html'), '?');
}

function handleDropSuccess (e) {
	e.preventDefault();
  e.stopImmediatePropagation();
  console.log('handle drop inside', e.dataTransfer.getData('text/html'), '?');
}

document.addEventListener('dragover', handleDragOver);
document.addEventListener('drop', handleDropOutside);

const dropPage = document.querySelector('.drop-page');
dropPage.addEventListener('dragover', handleDragOver);
dropPage.addEventListener('drop', handleDropSuccess);


const srcEls = document.querySelectorAll('.draggable.copy');
[...srcEls].forEach((e) => {
	e.setAttribute('draggable', true)
	e.addEventListener('dragstart', handleCopyDragStart);
});