JSFiddle - React, Tailwind, and code Playground

by koraykural

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.9/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<body onload="setupPage()">
  <div class="flex flex-row justify-center w-full lg:w-1/2 mx-auto">
    <div class="w-1/2 bg-gray-900 rounded py-2">
      <div id="ranked" class="list-group">
        <!-- Items will go here -->
      </div>
    </div>
    <div class="w-1/2 bg-gray-900 py-2">
      <div id="unranked" class="list-group">
        <!-- Items will go here -->
      </div>
    </div>
  </div>
</body>

CSS

.list-group {
  max-height: 75vh;
  width: 100%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #fff;
  height: 100%;
}
.list-group-item {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none;
  padding: 0.5rem;
  padding-left: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.list-group-item.ranked {
  --bg-opacity: 1;
  background-color: #2a4365;
  background-color: rgba(42, 67, 101, var(--bg-opacity));
}
.list-group-item.unranked {
  --bg-opacity: 1;
  background-color: #22543d;
  background-color: rgba(34, 84, 61, var(--bg-opacity));
}

@media (min-width: 768px) {
  .list-group {
    max-height: none;
    overflow-y: hidden;
  }
}

JavaScript

const animation = 200;
const itemCount = 500

function setupPage() {
	setupSortable();
  createList("ranked", itemCount);
  createList("unranked", itemCount);
}

const sortableOpts = {
  group: "shared",
  animation: animation,
  delay: 150,
  touchStartThreshold: 5,
  delayOnTouchOnly: true,
  forceFallback: true,
};

function setupSortable() {
  const ranked = document.getElementById("ranked");
  const unranked = document.getElementById("unranked");
  sortable = new Sortable(ranked, {
    ...sortableOpts,
    onChange: changeFn
  });
  sortable2 = new Sortable(unranked, {
    ...sortableOpts,
    onChange: changeFn
  });
}

function changeFn(e) {
  if (e.to.id === "ranked") {
    e.item.classList.add("ranked");
    e.item.classList.remove("unranked");
  }
  if (e.to.id === "unranked") {
    e.item.classList.remove("ranked");
    e.item.classList.add("unranked");
  }
}

function createList(id, count) {
  const list = document.getElementById(id);
  for (let i = 1; i <= count; i++) {
    const div = document.createElement("div");
    div.classList.add("list-group-item");
    div.classList.add(id);
    const nameText = document.createTextNode(movies[Math.floor(Math.random() * 5)]);
    div.appendChild(nameText);
    list.appendChild(div);
  }
}

let movies = [
	"The Shawshank Redemption",
  "The Dark Knight",
  'Schindler"s List',
  "Il buono, il brutto, il cattivo",
  "The Lord of the Rings: The Fellowship of the Ring",
]