JSFiddle - React, Tailwind, and code Playground

by dvanauken

HTML

<table id="draggable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr class="draggable-row">
      <td>1969</td>
      <td>Slaughterhouse-Five</td>
      <td>A+</td>
    </tr>
    <tr class="draggable-row">
      <td>1952</td>
      <td>Player Piano</td>
      <td>B</td>
    </tr>
    <tr class="draggable-row">
      <td>1963</td>
      <td>Cat's Cradle</td>
      <td>A+</td>
    </tr>
    <tr class="draggable-row">
      <td>1973</td>
      <td>Breakfast of Champions</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

<table id="sortable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sortable-row">
      <td>1965</td>
      <td>God Bless You, Mr. Rosewater</td>
      <td>A</td>
    </tr>
  </tbody>
</table>

CSS

.ui-state-highlight {
        background: mediumpurple;
      }

JavaScript

$(function() {
  $(".draggable-row").draggable({
    connectToSortable: "#sortable",
    helper: 'clone',
    revert: "invalid"
  });

  $("#sortable").sortable({
    cursor: "move",
    items: 'tbody > tr',
    zIndex: 9999,
    placeholder: "ui-state-highlight",
    out: function(event, ui) {
      if (ui.item.hasClass("sortable-row")) {
        $(ui.item).fadeOut(1000, function() {
          $(this).remove();
        });
      }
    },
  });

  $("#sortable").droppable({
    //accept: ".draggable-row",
    drop: function(event, ui) {
      var id = ui.draggable.children("td").eq(0).text();
      var test = inSortable(id);
      if (test > 1) {
        alert(id + 'Is already contained in the table');
        ui.draggable.remove();
      }
      var html = $("<tr>").html(ui.draggable.html());
      ui.helper.context.draggable = false;
      ui.helper.context.className = "";
    },
    out: function(event, ui) {
      $(ui.draggable).fadeOut(1000, function() {
        $(this).remove();
      });
    }
  });
  $("table").disableSelection();

  function inSortable(id) {
    var result = 0;
    $('#sortable tbody tr td:nth-child(1)').each(function() {
      var a = id;
      var b = $(this).text().trim();
      if (a == b) {
        result++;
      }
    });
    return result;
  }
});