JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">

        /* enable dark mode */
        @custom-variant dark (&:where(.dark, .dark *));

        @theme {
            --color-eb-red: #e60000;
            --color-eb-dark: #1b1e1f;
            --color-eb-gray: #181a1b;

            --font-sans: 'Inter', sans-serif;
        }

        /* Optional: Additional custom utilities */
        @layer utilities {
            /*.text-gradient {*/
            /*    background-clip: text;*/
            /*    -webkit-background-clip: text;*/
            /*    color: transparent;*/
            /*}*/
        }
    </style>

<div>
    <h2 class="pb-4 mb-4 text-4xl font-bold tracking-tight text-heading text-center md:text-5xl lg:text-6xl text-black dark:text-white transition duration-900 ease">Sort columns</h2>
    <ul id="columns">
        <li class="column p-1 m-1 text-white bg-blue-700 border border-blue-200 rounded hover:border-blue-400 cursor-pointer" draggable="true">
            <input type="checkbox" value="fname" checked="">&nbsp;First name
        </li>
        <li class="column p-1 m-1 text-white bg-blue-700 border border-blue-200 rounded hover:border-blue-400 cursor-pointer" draggable="true">
            <input type="checkbox" value="lname" checked="">&nbsp;Last name
        </li>
        <li class="column p-1 m-1 text-white bg-blue-700 border border-blue-200 rounded hover:border-blue-400 cursor-pointer" draggable="true">
            <input type="checkbox" value="uname" checked="">&nbsp;username
        </li>
        <li class="column p-1 m-1 text-white bg-blue-700 border border-blue-200 rounded hover:border-blue-400 cursor-pointer" draggable="true">
            <input type="checkbox" value="email" checked="">&nbsp;email
        </li>
        <li class="column p-1 m-1 text-white bg-blue-700 border border-blue-200 rounded hover:border-blue-400 cursor-pointer"...

CSS

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}
.column {
  padding: 10px;
  margin: 5px 0;
  background: #f0f0f0;
  cursor: grab;
  display: flex;
  align-items: center;
}
.column.dragging {
  opacity: 0.5;
}
ul {
  list-style: none;
}
.column input {
  margin-right: 10px;
}

JavaScript

const list = document.getElementById('columns');
let draggedItem = null;

list.addEventListener('dragstart', (e) => {
  if (e.target.classList.contains('column')) {
    draggedItem = e.target;
    e.target.classList.add('dragging');
    e.dataTransfer.setData('text/html', e.target.innerHTML);
  }
});

list.addEventListener('dragend', (e) => {
  if (e.target.classList.contains('column')) {
    e.target.classList.remove('dragging');
  }
});

list.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
});

list.addEventListener('drop', (e) => {
  e.preventDefault();
  if (draggedItem !== e.target && e.target.classList.contains('column')) {
    const html = e.dataTransfer.getData('text/html');
    draggedItem.innerHTML = e.target.innerHTML;
    e.target.innerHTML = html;
  }
});