JSFiddle - React, Tailwind, and code Playground

by Ben Schnell

HTML

<div id="lists-container">
  <div id="one" class="list" draggable="true">
     <p>
       One
     </p>
  </div>
  <div id="two" class="list" draggable="true">
     <p>
       Two
     </p>
  </div>
  <div id="three" class="list" draggable="true">
     <p>
       Three
     </p>
  </div>
  <div id="four" class="list" draggable="true">
     <p>
       Four
     </p>
  </div>
  <div id="five" class="list" draggable="true">
     <p>
       Five
     </p>
  </div>
</div>
<div id="kanban-container">
  <div id="six" class="item" draggable="true">
     <p>
       One
     </p>
  </div>
  <div id="seven" class="item" draggable="true">
     <p>
       Two
     </p>
  </div>
  <div id="eight" class="item" draggable="true">
     <p>
       Three
     </p>
  </div>
  <div id="nine" class="item" draggable="true">
     <p>
       Four
     </p>
  </div>
  <div id="ten" class="item" draggable="true">
     <p>
       Five
     </p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
#lists-container,
#kanban-container {
  display: flex;
  justify-content: center;
  align-items: space-around;
  margin: 15px;
}

.list, .item {
  width: 100px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  transition: width 500ms;
}

.list p,
.item p {
  color: #888;
  font-family: "Lato";
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* .droptarget {
  width: 15px;
  height: 100%;
  transition: width 500ms;
} */

.list.dropable,
.item.dropable {
  background-color: rgba(135, 135, 135, 0.72);
  width: 150px;
  transition: width 150ms;
}

JavaScript

const droptargets = document.querySelectorAll('.droptarget');
const draglists = document.querySelectorAll('.list');
const dragitems = document.querySelectorAll('.item');

draglists.forEach(draglist => {
	draglist.addEventListener('dragstart', dragStart);
  draglist.addEventListener('dragenter', dragEnter);
  draglist.addEventListener('dragleave', dragLeave);
  draglist.addEventListener('dragover', dragOver);
  draglist.addEventListener('drop', dragDrop);
})

dragitems.forEach(dragitem => {
	dragitem.addEventListener('dragstart', dragStart);
  dragitem.addEventListener('dragenter', dragEnter);
  dragitem.addEventListener('dragleave', dragLeave);
  dragitem.addEventListener('dragover', dragOver);
  dragitem.addEventListener('drop', dragDrop);
})

/* droptargets.forEach(droptarget => {

}) */

function dragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}

function dragEnter() {
  let placeholder = document.createElement('li');
  placeholder.setAttribute('class', 'item');
  placeholder.classList.add('dropable');
  this.prepend(placeholder);
}

function dragLeave() {
	this.classList.remove('dropable');
}

function dragOver(e) {
	e.preventDefault();
}

function dragDrop() {
	this.classList.remove('dropable');
	const id = event.dataTransfer.getData('text');  
  const draggableElement = document.getElementById(id);
  const containerId = this.parentElement;
  containerId.insertBefore(draggableElement, this);
}