JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div class="wrapper">
  <div class="box a1">A</div>
  <div class="box b1">B</div>
  <div class="box c1">C</div>
  <div class="box d1">D</div>
  <div class="box e1">E</div>
  <div class="box f1">F</div>
</div>
<div class="wrapper">
  <div class="box a2">A</div>
  <div class="box b2">B</div>
  <div class="box c2">C</div>
  <div class="box d2">D</div>
  <div class="box e2">E</div>
  <div class="box f2">F</div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

JavaScript

window.onload = () => {
	let elements = document.querySelectorAll('.box');
  let containers = document.querySelectorAll('.wrapper');
  
  elements.forEach((element) => {
  	element.setAttribute('draggable', true);
  
  	element.addEventListener('dragstart', (event) => {
    	console.log(event);
      event.dataTransfer.setData('text/plain', event.target.classList);
      event.currentTarget.style.background = "red";
    });
  });
  
  containers.forEach((container) => {
  	container.addEventListener('drop', (event) => {
    		console.log(event);
    
        event.preventDefault();
        let data = event.dataTransfer.getData("text");
      	
        console.log(data);
        
        let element = document.querySelector(`.${data.split(' ').join('.')}`);
        event.target.appendChild(element);
    });
    
    container.addEventListener('dragover', (event) => {
    	console.log(event);
  		event.preventDefault();
    });
  });
}