Sortable multiple selected items

Question

I have two tables and I want to be able to drag and drop several items at once. The user selects the items through checbox and then can drag and drop them into the same or another table. I know it is possible to drag and drop one item, but It is possible to drag and drop several items at once?

$("#table1 tbody").sortable({
  connectWith: "#table2 tbody",
  helper: function(e, item) {
    var $helper = $("<div/>");
    // Check the row that user is moving
    item.find("td").eq(0).find("input")[0].checked = true;

    const nodes = item.parent().children(":has(input:checked)").clone();
    item.data("nodes", nodes).siblings(":has(input:checked)").remove();
    return $helper.append(nodes);
  },
  start: function(e, ui) {},
  stop: function(e, ui) {
    var nodes = ui.item.data("nodes");
    ui.item.after(nodes).remove();
  },
  receive: function(e, ui) {},
  axis: "xy",
});

$("#table2 tbody").sortable({
  connectWith: "#table1 tbody",
  helper: function(e, item) {
    var $helper = $("<div/>");
    // Check the row that user is moving
    item.find("td").eq(0).find("input")[0].checked = true;

    const nodes = item.parent().children(":has(input:checked)").clone();
    item.data("nodes", nodes).siblings(":has(input:checked)").remove();
    return $helper.append(nodes);
  },
  stop: function(e, ui) {
    var nodes = ui.item.data("nodes");
    ui.item.after(nodes).remove();
  },
  start: function(e, ui) {},
  update: function(e, ui) {},
  receive: function(e, ui) {},
  axis: "xy",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>

<table id="table1">
  <thead>
    <tr>
      <th><div><input type="checkbox"/></div></th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><input type="checkbox"></div></td>
      <td>N1</td>
      <td>D1</td>
      <td>T1</td>
    </tr>
    <tr>
      <td><div><input type="checkbox"></div></td>
      <td>N2</td>
      <td>D2</td>
      <td>T2</td>
    </tr>
  </tbody>
</table>
<hr>
<table id="table2">
  <thead>
    <tr>
      <th><div><input type="checkbox"/></div></th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><input type="checkbox"></div></td>
      <td>N3</td>
      <td>D3</td>
      <td>T3</td>
    </tr>
    <tr>
      <td><div><input type="checkbox"></div></td>
      <td>N4</td>
      <td>D4</td>
      <td>T4</td>
    </tr>
  </tbody>
</table>

I have checked about multisortable but I am not able to adapt it to my requirements.

Answer 1

You need to use multisortable

And you need to apply it over the table.

Working snippet:

$(function() {
  $('table.sortable').multisortable();
  $('table#list1,table#list2').sortable('option', 'connectWith', '.sortable');
});

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Multi-Sortable-Plugin-jQuery-UI/jquery.multisortable.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/materia/bootstrap.min.css">
<table id="list1" class="sortable">
  <thead>
    <tr>
      <th>
        <div><input type="checkbox" /></div>
      </th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody class="contenteditable">
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N1</td>
      <td>D1</td>
      <td>T1</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N2</td>
      <td>D2</td>
      <td>T2</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N3</td>
      <td>D3</td>
      <td>T3</td>
    </tr>
  </tbody>
</table>
<hr>
<table id="list2" class="sortable">
  <thead>
    <tr>
      <th>
        <div><input type="checkbox" /></div>
      </th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody class="contenteditable">
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N4</td>
      <td>D4</td>
      <td>T4</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N5</td>
      <td>D5</td>
      <td>T5</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox"></div>
      </td>
      <td>N6</td>
      <td>D6</td>
      <td>T6</td>
    </tr>
  </tbody>
</table>