可对多个选定项目进行排序

Question

我有两个表，我希望能够一次拖放多个项目。用户通过复选框选择项目，然后可以将它们拖放到同一个或另一个表中。 我知道可以拖放一个项目，但是可以一次拖放多个项目吗？ jsfiddle

$("#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",
});

<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>

我已经检查了multisortable，但我无法使其适应我的要求。

Answer 1

我稍微更新了你的 html（没什么大不了的）

然后我更新了可排序的

helper

、

start

、

update

和

receive

方法以使用

.data('multidrag')

这将允许您一次拖动多个

tr

。

演示

$(function() {
  $('.select-all').on('click', function() {
    const table = $(this).closest('table');
    const isChecked = $(this).is(':checked');
    table.find('.select-row').prop('checked', isChecked).closest('tr').toggleClass('selected', isChecked);
  });

  $('.select-row').on('click', function() {
    const row = $(this).closest('tr');
    row.toggleClass('selected', $(this).is(':checked'));
  });

  $('tbody').sortable({
    connectWith: "tbody",
    items: '> tr',
    helper: function(e, item) {
      // Clone selected items
      var $helper = $('<div/>');
      if (!item.hasClass('selected')) {
        item.addClass('selected').siblings().removeClass('selected');
      }
      var elements = item.parent().children('.selected').clone();
      item.data('multidrag', elements).siblings('.selected').remove();
      return $helper.append(elements);
    },
    start: function(e, ui) {
      var elements = ui.item.data('multidrag');
      ui.placeholder.height(elements.length * ui.helper.outerHeight());
      ui.helper.append(elements);
    },
    stop: function(e, ui) {
      var elements = ui.item.data('multidrag');
      ui.item.after(elements).remove();
    },
    receive: function(e, ui) {
      var elements = ui.item.data('multidrag');
      ui.item.after(elements).remove();
    },
    axis: "y"
  }).disableSelection();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<table id="table1">
  <thead>
    <tr>
      <th>
        <div><input type="checkbox" class="select-all" /></div>
      </th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></div>
      </td>
      <td>N1</td>
      <td>D1</td>
      <td>T1</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></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" class="select-all" /></div>
      </th>
      <th>Name</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></div>
      </td>
      <td>N3</td>
      <td>D3</td>
      <td>T3</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></div>
      </td>
      <td>N4</td>
      <td>D4</td>
      <td>T4</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></div>
      </td>
      <td>N5</td>
      <td>D5</td>
      <td>T5</td>
    </tr>
    <tr>
      <td>
        <div><input type="checkbox" class="select-row" /></div>
      </td>
      <td>N6</td>
      <td>D6</td>
      <td>T6</td>
    </tr>
  </tbody>
</table>