JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="background">
  <div class="game-items">
    <ul id="sortable">
      <li id="log-1" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=If+It" class="default" /></li>
      <li id="log-2" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=Too+Heavy!" class="default" /></li>
      <li id="log-3" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=Than+pedal+of+flower+resting" class="default" /></li>
      <li id="log-4" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=On+grass,+oh+still+too+heavy+it+were," class="default" /></li>
      <li id="log-5" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=were+lighter+touch" class="default" /></li>
    </ul>
  </div>
</div>

CSS

* {
  margin: 0;
}

.background {
  background-image: url(https://i.stack.imgur.com/AuzOk.png);
  height: 363px;
  margin: 0;
  padding: 0;
}

.game-items {
  background: #0f9fa1;
  display: inline-block;
  padding: 5px;
  position: absolute;
  top: 140px;
  left: 150px;
}

.game-items ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.game-items ul li {
  margin-top: 4px;
}

.game-items img.default {
  border-radius: .25em;
}

.game-items ul li.sort img {
  border: 2px solid #914848;
}

.game-items ul li.done img {
  border: 2px solid #05ff2b;
}

JavaScript

$(function() {
  var final = [
    1,
    5,
    3,
    4,
    2
  ];

  $("#sortable").sortable({
      items: "li:not(.done)",
      update: function(e, ui) {
        var currentOrder = [];
        $(this).find("li").each(function(ind, elem) {
          var itemId = $(elem).attr("id");
          currentOrder.push({
            id: itemId,
            ordNum: itemId.slice(-1)
          });
        });
        console.log(currentOrder);
        $.each(final, function(k, i) {
          if (currentOrder[k].ordNum == i) {
            // Match
            $("#" + currentOrder[k].id).removeClass("sort").addClass("done");
          }
        });
        $(this).sortable("refresh");
      }
    })
    .disableSelection();
});