Search code examples
javascripthtmljquery

Button doesn't work second time while moving contents

The following code generates blue text boxes when OptionOne or OptionTwo is selected. For example, when the Show Options button is clicked, a blue text box appears on the left side and then I can enter row and column values and hit the calculate button to figure out the cell number where it needs to be moved using the Move Text Content! button.

The problem I'm facing is, the move button works fine for the first time. However, when I select the OptionTwo from the dropdown and calculate new cell number and hit the Move Text Content! button, it doesn't work as shown below.

/*

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

*/

$('[name="optionSelection"]').change(function () {
      //clean up the divs inside div with id phrase
    $("#phrase").empty();
  });

  function showOptions() {
    console.log("hii");
    console.log($("#optionSelection").val());
    var html;
    if ($("#optionSelection").val() == 1) {
      for (i = 0; i < 3; i++) {
         
            html = "<div data-id="+i+"><span class='words' data-id="+i+">OptionOne#"+i+"</span></div>";
            $("#phrase").append(html);
      }
      
    }
    else {
      for (j = 0; j < 5; j++) {
         
        html = "<div data-id="+j+"><span class='words' data-id="+j+">OptionTwo#"+j+"</span></div>";
       $("#phrase").append(html);
    }
   // $("#phrase").append(html);
  }
}


  $(".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 + startPos - 1] + ") .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();

  /* get cell number */

  const myRow = document.querySelector("#inp1");
  const myCol = document.querySelector("#inp2");
  var startPos = 0;
  const myCalculateButton = document.querySelector("#calculate");
  const myAnswer = document.querySelector("#cellnum");
  myCalculateButton.addEventListener("click", () => {
    var rowNumber = myRow.value.toUpperCase();
    var colNumber = myCol.value;
    var result = 0;
    switch (rowNumber) {
      case "A":
        rowNumber = 42;
        break;
      case "B":
        rowNumber = 36;
        break;
      case "C":
        rowNumber = 30;
        break;
      case "D":
        rowNumber = 24;
        break;
      case "E":
        rowNumber = 18;
        break;
      case "F":
        rowNumber = 12;
        break;
      case "G":
        rowNumber = 6;
        break;
      case "H":
        rowNumber = 0;
        break;
    }

    if (colNumber < 7) {
      result = rowNumber + parseInt(colNumber);
    } else {
      result = rowNumber + 42 + parseInt(colNumber);
    }
    myAnswer.innerHTML = result;
    startPos = result;
  });
  
 
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 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;
  }

  input,
  button,
  label,
  p.target {
    display: block;
    margin: 0 0 0.4rem;
    color: #000;
  }
  p.target {
    margin: 0 0 1rem;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- You'd need to set up something different for touch devices though -->

  <h1>Move testings</h1>
  <div class="wrap">
    <div>
      <label for="optionSelection">Select options</label>
      <select name="optionSelection" id="optionSelection">
        <option value="1">OptionOne</option>
        <option value="2">OptionTwo</option>
      </select>
    </div>
    <div>
      <button id="showOptions" onclick="showOptions()" type="button">
        Show Options
      </button>
    </div>
    <div>
      <label for="inp1">Enter a row A - H</label>
      <input id="inp1" placeholder="Enter Row" />
      <label for="inp2">Enter a column 1 - 12</label>
      <input id="inp2" placeholder="Enter Column" />
      <button id="calculate">Calculate</button>
      <p class="target">The cell number is <b id="cellnum">?</b></p>
      <button id="move-text" type="button">Move Text Content!</button>
    </div>
    <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>

    <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>

For your testing, make sure to select different row and column number if you are testing move button second time as I don't have validation in place yet which will prevent the move from moving to the same place again ( where something already exists in the cell).

Solution

  • Remove the once option from #move-text click event listener to allow multiple invocations:

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

    Snippet:

    /*

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

*/

$('[name="optionSelection"]').change(function () {
      //clean up the divs inside div with id phrase
    $("#phrase").empty();
  });

  function showOptions() {
    console.log("hii");
    console.log($("#optionSelection").val());
    var html;
    if ($("#optionSelection").val() == 1) {
      for (i = 0; i < 3; i++) {
         
            html = "<div data-id="+i+"><span class='words' data-id="+i+">OptionOne#"+i+"</span></div>";
            $("#phrase").append(html);
      }
      
    }
    else {
      for (j = 0; j < 5; j++) {
         
        html = "<div data-id="+j+"><span class='words' data-id="+j+">OptionTwo#"+j+"</span></div>";
       $("#phrase").append(html);
    }
   // $("#phrase").append(html);
  }
}


  $(".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();
    }
  );

  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 + startPos - 1] + ") .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();

  /* get cell number */

  const myRow = document.querySelector("#inp1");
  const myCol = document.querySelector("#inp2");
  var startPos = 0;
  const myCalculateButton = document.querySelector("#calculate");
  const myAnswer = document.querySelector("#cellnum");
  myCalculateButton.addEventListener("click", () => {
    var rowNumber = myRow.value.toUpperCase();
    var colNumber = myCol.value;
    var result = 0;
    switch (rowNumber) {
      case "A":
        rowNumber = 42;
        break;
      case "B":
        rowNumber = 36;
        break;
      case "C":
        rowNumber = 30;
        break;
      case "D":
        rowNumber = 24;
        break;
      case "E":
        rowNumber = 18;
        break;
      case "F":
        rowNumber = 12;
        break;
      case "G":
        rowNumber = 6;
        break;
      case "H":
        rowNumber = 0;
        break;
    }

    if (colNumber < 7) {
      result = rowNumber + parseInt(colNumber);
    } else {
      result = rowNumber + 42 + parseInt(colNumber);
    }
    myAnswer.innerHTML = result;
    startPos = result;
  });
  
 
    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 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;
  }

  input,
  button,
  label,
  p.target {
    display: block;
    margin: 0 0 0.4rem;
    color: #000;
  }
  p.target {
    margin: 0 0 1rem;
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- You'd need to set up something different for touch devices though -->

  <h1>Move testings</h1>
  <div class="wrap">
    <div>
      <label for="optionSelection">Select options</label>
      <select name="optionSelection" id="optionSelection">
        <option value="1">OptionOne</option>
        <option value="2">OptionTwo</option>
      </select>
    </div>
    <div>
      <button id="showOptions" onclick="showOptions()" type="button">
        Show Options
      </button>
    </div>
    <div>
      <label for="inp1">Enter a row A - H</label>
      <input id="inp1" placeholder="Enter Row" />
      <label for="inp2">Enter a column 1 - 12</label>
      <input id="inp2" placeholder="Enter Column" />
      <button id="calculate">Calculate</button>
      <p class="target">The cell number is <b id="cellnum">?</b></p>
      <button id="move-text" type="button">Move Text Content!</button>
    </div>
    <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>

    <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>