jquery ui sortable between two tables

jQuery UI Sortable Between Two Tables#

Sorting tables is a common functionality that is implemented on many websites. jQuery UI has a sortable widget that allows users to drag and drop table rows to rearrange their order. In this tutorial, we will see how to implement sortable between two tables using jQuery UI.

HTML Markup#

First, let's create two tables with some dummy data:

<table id="table1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<table id="table2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Javascript Code#

Next, we need to initialize the sortable widget on both tables and specify the connectWith option to allow dragging and dropping between them. We also need to define the receive event to handle moving the row to the other table.

$(() => {
  $("#table1 tbody").sortable({
    connectWith: "#table2 tbody",
    helper: "clone",
    cursor: "move"
  }).disableSelection();

  $("#table2 tbody").sortable({
    connectWith: "#table1 tbody",
    helper: "clone",
    cursor: "move",
    receive: function(event, ui) {
      const item = ui.item.clone();
      ui.sender.sortable("cancel");
      $("#table1 tbody").append(item);
    }
  }).disableSelection();
});

Explanation#

In the above code, we first select the table bodies of both tables using jQuery selectors. We then initialize the sortable widget on both tables using the sortable() method.

The connectWith option specifies the selector for the other table that can also be sorted. In our case, we want to allow sorting between both tables, so we specify each other's selector.

The helper option specifies the type of helper that will be used when dragging the rows. In this case, we are using the "clone" option to create a copy of the row being dragged.

The cursor option specifies the cursor that will be displayed while dragging the row. In this case, we are using the "move" option to indicate that the row is being moved.

The receive event is triggered when a row is dropped into the other table. In this event, we first clone the dropped item using the clone() method. We then cancel the sorting operation on the sender table using the cancel() method. Finally, we append the cloned item to the receiving table using the append() method.

Conclusion#

In this tutorial, we saw how to implement sortable between two tables using jQuery UI. We learned how to initialize the sortable widget on both tables and specify the connectWith option to allow dragging and dropping between them. We also learned how to define the receive event to handle moving the row to the other table. I hope you find this tutorial helpful!