JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<div class="col" draggable="true">
  <span>1</span>
</div>

<div class="col" draggable="true">
  <span>2</span>
</div>

<div class="col" draggable="true">
  <span>3</span>
</div>

SCSS

.col {
  width: 100px;
  height: 100px;
  background-color: cadetblue;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

Babel + JSX

var cols = document.querySelectorAll('.col')

;[...cols].forEach((col) => {
	col.addEventListener('dragstart', dragStart, false)
  col.addEventListener('dragover', dragOver, false)
  col.addEventListener('dragenter', dragEnter, false)
  col.addEventListener('drop', drop, false)
  col.addEventListener('dragend', dragEnd, false)
})

var dragEl, firstEl, lastEl, nextEl;

function dragStart (e) {
	console.log('drag start')
  this.style.opacity = .4
  dragEl = this
  lastEl = this.parentNode.
}

function dragEnter (e) {
	if (this != dragEl) {
  	if (this.parentNode.lastChild == this) {
    	console.log('last')
    	this.parentNode.insertBefore(dragEl, this.nextSlibling)
    } else {
    	this.parentNode.insertBefore(dragEl, this)
    }
  }
}

function dragOver (e) {
	e.preventDefault()
  return false
}

function drop (e) {
	e.stopPropagation()
	console.log('drop')
  
  return false
}

function dragEnd (e) {
	console.log('end')
	this.style.opacity = 1
}