OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Sortable multiple selected items

  • Thread starter Thread starter David Márquez
  • Start date Start date
D

David Márquez

Guest
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? jsfiddle

Code:
$("#table1 tbody").sortable({
  connectWith: "#table2 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  stop: function(e, ui) {},
  receive: function(e, ui) {},
  axis: "xy",
});

$("#table2 tbody").sortable({
  connectWith: "#table1 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  update: function(e, ui) {},
  receive: function(e, ui) {},
  axis: "xy",
});

Code:
<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.

<p>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? <a href="https://jsfiddle.net/hfuvnm37/" rel="nofollow noreferrer">jsfiddle</a></p>
<pre><code>$("#table1 tbody").sortable({
connectWith: "#table2 tbody",
helper: function(e, tr) {
const $originals = tr.children();
const $helper = tr.clone();
$helper.children().each(function(index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
},
start: function(e, ui) {},
stop: function(e, ui) {},
receive: function(e, ui) {},
axis: "xy",
});

$("#table2 tbody").sortable({
connectWith: "#table1 tbody",
helper: function(e, tr) {
const $originals = tr.children();
const $helper = tr.clone();
$helper.children().each(function(index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width());
});
return $helper;
},
start: function(e, ui) {},
update: function(e, ui) {},
receive: function(e, ui) {},
axis: "xy",
});
</code></pre>
<pre><code><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>
</code></pre>
<p>I have checked about <a href="https://github.com/shvetsgroup/jquery.multisortable" rel="nofollow noreferrer">multisortable</a> but I am not able to adapt it to my requirements.</p>
 

Latest posts

Online statistics

Members online
1
Guests online
6
Total visitors
7
Top