JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slots">
  <div class="container" data-slot="1"></div>
  <div class="container" data-slot="2"></div>
  <div class="container" data-slot="3"></div>
  <div class="container" data-slot="4"></div>
</div>

<br />

<div id="actions"></div>

CSS

#slots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

#actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item,
.container {
  width: 100px;
  height: 100px;
}

.item {
  display: inline-block;
}

.container {
  background: lightgrey;
}

JavaScript

// Generate random skills
const list = document.getElementById("actions");
for (let i = 0; i < 8; i++) {
  const color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6),
    action = document.createElement("div");
  action.classList.add("item", "parent");
  action.setAttribute("data-skill", "skill-" + (i + 1));
  action.setAttribute("draggable", "true");
  action.style.backgroundColor = color;
  list.appendChild(action);
  initItem(action);
}

function initItem(i) {
  i.addEventListener("dragstart", (e) => {
    e.dataTransfer.clearData();

    e.dataTransfer.setData("text/plain", JSON.stringify({
      name: e.target.getAttribute("data-skill"),
      slot: e.target.parentNode.getAttribute("data-slot") || "empty",
      style: e.target.getAttribute("style")
    }));

    console.debug(e.dataTransfer.getData("text/plain"));
  })
}