Drag'n'drop items within table

Question

Drag'n'drop items within table

Navigation

#1 by (0 votes)

-2

Good afternoon guys, I'm trying to create a table with interactive events, similar to FullCalendar, was wondering if anyone knows any library that allows the creation of squares / rectangles that have drag'n'drop like those of FullCalendar or if it is possible to configure for the event category to appear on the y-axis and the dates on the x-axis.

javascript html css

asked by anonymous 26.06.2018 / 14:52

1 answer

How do I print information in the same place as the previous information? How to change the date coming from the Html form as d-m-Y to the Y-m-d format with PHP?

score 0 · Answer 1

For drag and drop you can use the jQuery 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><scriptsrc="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>

Just not clear to me this question

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