Drag'n'drop items inside table

Question

Good afternoon guys, I’m looking to create a table with interactive events, similar to Fullcalendar, wanted to know if anyone knows any library that allows the creation of squares/rectangles that has drag'n'drop as the Fullcalendar or whether it is possible to configure so that the event category appears on the y-axis and the dates on the x-axis.

Answer 1

For drag and drop you can use the jQuery UI Sortable vê a documentação

$("table tbody").sortable({
  update: function(event, ui) {
    $(this).children().each(function(index) {
      $(this).find('td').last().html(index + 1)
    });
  }
});

table {
  border-collapse: collapse;
}

td,
th {
  background: #fff;
  border-width: 0;
  border-bottom: 1px solid #B8B8B8;
  font-weight: normal !important;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
}

tr.even {
  td,
  th {
    background: #f1f1f1;
  }
}

thead,
tfoot {
  text-transform: uppercase;
  th {
    background: #ccc;
  }
}

body {
  color: #111;
  font-size: 16px;
  font-family: sans-serif;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<table>
  <thead>
    <tr class="ui-state-default">
      <th colspan="4">Categoria</th>
      <th colspan="4">Data</th>
      <td colspan="4">Orden</td>
    </tr>
  </thead>
  <tr class="ui-state-default">
    <th colspan="4">Festa Juninas</th>
    <td colspan="4">24 junho</td>
    <td colspan="4">1</td>
  </tr>
  <tr class="ui-state-default even">
    <th colspan="4">Natal</th>
    <td colspan="4">25 dezembro</td>
    <td colspan="4">2</td>
  </tr>

  </tbody>
</table>

It just wasn’t very clear to me

"whether it is possible to configure for the event category to appear in the y-axis and dates on x-axis."