<!-- You'd need to set up something different for touch devices though -->
<h1>Drag and drop example </h1>
<button id="move-text" type="button">Move Text Content!</button>
<div class="wrap">
  <div id="phrase">
    <!-- remove whitespace from  inside div html and then we can use :empty in css to change background -->
    <div data-id='1'><span class='words' data-id='1'>H1 text</span></div>
    <div data-id='2'><span class='words' data-id='2'>H2 text</span></div>
    <div data-id='3'><span class='words' data-id='3'>H3 text</span></div>
    <div data-id='4'><span class='words' data-id='4'>H4 text</span></div>
    <div data-id='5'><span class='words' data-id='5'>H5 text</span></div>
    <div data-id='6'><span class='words' data-id='6'>H6 text</span></div>
    <div data-id='7'><span class='words' data-id='7'>G1 text</span></div>
    <div data-id='8'><span class='words' data-id='8'>G2 text</span></div>
    <div data-id='9'><span class='words' data-id='9'>G3 text</span></div>
    <div data-id='10'><span class='words' data-id='10'>G4 text</span></div>
    <div data-id='11'><span class='words' data-id='11'>G5 Text</span></div>
    <div data-id='12'><span class='words' data-id='12'>G6 Text</span></div>
    <div data-id='13'><span class='words' data-id='13'>F1 Text</span></div>
    <div data-id='14'><span class='words' data-id='14'>F2 Text</span></div>
    <div data-id='15'><span class='words' data-id='15'>F3 Text</span></div>
    <div data-id='16'><span class='words' data-id='16'>F4 Text</span></div>
    <div data-id='17'><span class='words' data-id='17'>F5 Text</span></div>
    <div data-id='18'><span class='words' data-id='18'>F6 Text</span></div>
    <div data-id='19'><span class='words' data-id='19'>E1 Text</span></div>
    <div data-id='20'><span class='words' data-id='20'>E2 Text</span></div>
    <div data-id='21'><span class='words' data-id='21'>E3 Text</span></div>
    <div data-id='22'><span class='words' data-id='22'>E4 Text</span></div>
    <div data-id='23'><span class='words' data-id='23'>E5 Text</span></div>
    <div data-id='24'><span class='words' data-id='24'>E6 Text</span></div>
    <div data-id='25'><span class='words' data-id='25'>D1 Text</span></div>
    <div data-id='26'><span class='words' data-id='26'>D2 Text</span></div>
    <div data-id='27'><span class='words' data-id='27'>D3 Text</span></div>
    <div data-id='28'><span class='words' data-id='28'>D4 Text</span></div>
    <div data-id='29'><span class='words' data-id='29'>D5 Text</span></div>
    <div data-id='30'><span class='words' data-id='30'>D6 Text</span></div>
    <div data-id='31'><span class='words' data-id='31'>C1 Text</span></div>
    <div data-id='32'><span class='words' data-id='32'>C2 Text</span></div>
    <div data-id='33'><span class='words' data-id='33'>C3 Text</span></div>
    <div data-id='34'><span class='words' data-id='34'>C4 Text</span></div>
    <div data-id='35'><span class='words' data-id='35'>C5 Text</span></div>
    <div data-id='36'><span class='words' data-id='36'>C6 Text</span></div>
    <div data-id='37'><span class='words' data-id='37'>B1 Text</span></div>
    <div data-id='38'><span class='words' data-id='38'>B2 Text</span></div>
    <div data-id='39'><span class='words' data-id='39'>B3 Text</span></div>
    <div data-id='40'><span class='words' data-id='40'>B4 Text</span></div>
    <div data-id='41'><span class='words' data-id='41'>B5 Text</span></div>
    <div data-id='42'><span class='words' data-id='42'>B6 Text</span></div>
    <div data-id='43'><span class='words' data-id='43'>A1 Text</span></div>
    <div data-id='44'><span class='words' data-id='44'>A2 Text</span></div>
    <div data-id='45'><span class='words' data-id='45'>A3 Text</span></div>
    <div data-id='46'><span class='words' data-id='46'>A4 Text</span></div>
    <div data-id='47'><span class='words' data-id='47'>A5 Text</span></div>
    <div data-id='48'><span class='words' data-id='48'>A6 Text</span></div>
    <div data-id='49'><span class='words' data-id='49'>H7 Text</span></div>
    <div data-id='50'><span class='words' data-id='50'>H8 Text</span></div>
    <div data-id='51'><span class='words' data-id='51'>H9 Text</span></div>
    <div data-id='52'><span class='words' data-id='52'>H10 Text</span></div>
    <div data-id='53'><span class='words' data-id='53'>H11 Text</span></div>
    <div data-id='54'><span class='words' data-id='54'>H12 Text</span></div>
    <div data-id='55'><span class='words' data-id='55'>G7 Text</span></div>
    <div data-id='56'><span class='words' data-id='56'>G8 Text</span></div>
    <div data-id='57'><span class='words' data-id='57'>G9 Text</span></div>
    <div data-id='58'><span class='words' data-id='58'>G10 Text</span></div>
    <div data-id='59'><span class='words' data-id='59'>G11 Text</span></div>
    <div data-id='60'><span class='words' data-id='60'>G12 Text</span></div>
    <div data-id='61'><span class='words' data-id='61'>F7 Text</span></div>
    <div data-id='62'><span class='words' data-id='62'>F8 Text</span></div>
    <div data-id='63'><span class='words' data-id='63'>F9 Text</span></div>
    <div data-id='64'><span class='words' data-id='64'>F10 Text</span></div>
    <div data-id='65'><span class='words' data-id='65'>F11 Text</span></div>
    <div data-id='66'><span class='words' data-id='66'>F12 Text</span></div>
    <div data-id='67'><span class='words' data-id='67'>E7 Text</span></div>
    <div data-id='68'><span class='words' data-id='68'>E8 Text</span></div>
    <div data-id='69'><span class='words' data-id='69'>E9 Text</span></div>
    <div data-id='70'><span class='words' data-id='70'>E10 Text</span></div>
    <div data-id='71'><span class='words' data-id='71'>E11 Text</span></div>
    <div data-id='72'><span class='words' data-id='72'>E12 Text</span></div>
    <div data-id='73'><span class='words' data-id='73'>D7 Text</span></div>
    <div data-id='74'><span class='words' data-id='74'>D8 Text</span></div>
    <div data-id='75'><span class='words' data-id='75'>D9 Text</span></div>
    <div data-id='76'><span class='words' data-id='76'>D10 Text</span></div>
    <div data-id='77'><span class='words' data-id='77'>D11 Text</span></div>
    <div data-id='78'><span class='words' data-id='78'>D12 Text</span></div>
    <div data-id='79'><span class='words' data-id='79'>C7 Text</span></div>
    <div data-id='80'><span class='words' data-id='80'>C8 Text</span></div>
    <div data-id='81'><span class='words' data-id='81'>C9 Text</span></div>
    <div data-id='82'><span class='words' data-id='82'>C10 Text</span></div>
    <div data-id='83'><span class='words' data-id='83'>C11 Text</span></div>
    <div data-id='84'><span class='words' data-id='84'>C12 Text</span></div>
    <div data-id='85'><span class='words' data-id='85'>B7 Text</span></div>
    <div data-id='86'><span class='words' data-id='86'>B8 Text</span></div>
    <div data-id='87'><span class='words' data-id='87'>B9 Text</span></div>
    <div data-id='88'><span class='words' data-id='88'>B10 Text</span></div>
    <div data-id='89'><span class='words' data-id='89'>B11 Text</span></div>
    <div data-id='90'><span class='words' data-id='90'>B12 Text</span></div>
    <div data-id='91'><span class='words' data-id='91'>A7 Text</span></div>
    <div data-id='92'><span class='words' data-id='92'>A8 Text</span></div>
    <div data-id='93'><span class='words' data-id='93'>A9 Text</span></div>
    <div data-id='94'><span class='words' data-id='94'>A10 Text</span></div>
    <div data-id='95'><span class='words' data-id='95'>A11 Text</span></div>
    <div data-id='96'><span class='words' data-id='96'>A12 Text</span></div>
  </div>

  <div id="drop-em" class="grid">
    <div class="item">
      <div class="content"></div><!-- must have no spaces inside .content -->
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
    <div class="item">
      <div class="content"></div>
    </div>
  </div>
</div>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  counter-reset: columnCount 1 alphaCount cellCount;
}
h1 {
  text-align: center;
}
.wrap {
  display: flex;
  gap: 2rem;
  position:relative;
  padding-left:220px;
}

.grid {
  margin: auto;
  display: grid;
  flex: 1 0 0;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 1.5rem;
}

.item {
  position: relative;
  background-color: #f9f9f9;
  border: 1px solid grey;
  aspect-ratio: 1/1;
  counter-increment: columnCount;
  min-width: 0;
  transition: background 1s ease;
}
.item:nth-of-type(12n + 1) {
  counter-increment: alphaCount;
}
.item:nth-of-type(12n + 1)::before {
  content: counter(alphaCount, upper-alpha);
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: -1.75rem;
  color: red;
  pointer-events: none;
}
.item:nth-of-type(n + 13)::after {
  display: none;
}
.item::after {
  content: counter(columnCount);
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: -1.75rem;
  color: red;
  pointer-events: none;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
  color: #000;
  padding: 1rem;
  word-wrap: break-word;
  counter-increment: cellCount;
}

.words {
  cursor: move;
  transition: padding 0.5s ease;
}
.content:has(.ui-draggable-dragging) {
  overflow: visible;
}
.ui-droppable-active .content {
  overflow: visible;
}
.words.ui-draggable-dragging {
  background: blue;
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 999;
  color: #fff;
  display: block;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
#phrase {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  color: #fff;
  width:150px;
  overflow:auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin:1rem 0 .5rem;
}
#phrase > div {
  margin: 0 0 10px;
  width:150px;
  padding: 5px 10px;
  background: #007bff;
  border: 2px solid #007bff;
  border-radius: 6px;
  color: #fff;
}
#phrase > div:empty {
  background: #fff;
  border-style: dashed;
  padding: 0px 25px;
  min-height: 30px;
}

.moved {
  animation: fade 3s ease;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    background: red;
  }
}

.item .content::before {
  content: counter(cellCount);
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: smaller;
  color: #666;
  border-radius: 50%;
  border: 1px solid red;
  background: white;
  width: 1.2rem;
  height: 1, 2rem;
  display: grid;
  place-items: center;
}

#move-text.disabled{
  cursor:none;
  pointer-events:none;
  opacity:0.5;
}
#phrase:has(.ui-droppable-active){
  overflow:visible;
}
/*

Requires jquery + UI

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js

*/

$(".words").draggable({
  revert: function (event, ui) {
    var bRevertingPhrase = this.closest("#drop-em");

    if (!bRevertingPhrase.length) {
      var phraseID = $(this).data("id");
      var phraseHomeID = $(this).parent().data("id");

      //If the child and parent ids don't match, we move the child to the correct parent
      if (phraseID !== phraseHomeID) {
        var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
        correctCell.prepend(this);
      }
    }
    return !event;
  }
});
$("#drop-em > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable)
      .detach()
      .css({ top: 0, left: 0 })
      .appendTo($(this).find(".content:empty"));
    $("#move-text").addClass("disabled");
  }
});
$("#phrase > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
  }
});

const myButton = document.querySelector("#move-text");
myButton.addEventListener(
  "click",
  () => {
    fill();
  },
  {
    once: true
  }
);

var reOrder = [];
function fill() {
  const cells = document.querySelectorAll("#phrase > div > span");
  var newLoc = "";

  myButton.classList.add("disabled");

  cells.forEach((cell, index) => {
    newLoc = document.querySelector(
      ".item:nth-child(" + reOrder[index] + ") .content "
    );
    newLoc.append(cell);
    newLoc.classList.add("moved");
  });
}
function reArrange() {
  var limit1 = 85;
  var limit2 = 91;

  for (let loop = 0; loop < 8; loop++) {
    for (let i = 0; i < 6; i++) {
      reOrder.push(limit1 + i);
    }
    limit1 = limit1 - 12;
  }
  for (let loop = 0; loop < 8; loop++) {
    for (let j = 0; j < 6; j++) {
      reOrder.push(limit2 + j);
    }
    limit2 = limit2 - 12;
  }
}
reArrange();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js