JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col">
  <div draggable="true" class="item"></div>
</div>
<div class="col"></div>
<div class="col"></div>

CSS

body {
  background: #ccc;
}
.item {
  background: #6dc06d;
  width: 50px;
  height: 50px;
  margin: 10px;
}
.col {
  float: left;
  width: 70px;
  height: 70px;
  background: white;
  margin: 10px;
}

JavaScript

const cols = document.getElementsByClassName('col')
const item = document.querySelector('.item')

for (const col of cols) {
  col.addEventListener("dragover", (e) => {
    e.preventDefault()
  })
  col.addEventListener("drop", () => {
    alert(this)
    this.append(item)
  })
}