javascript - 如何在不同选项卡之间拖放多个元素

Question

我正在尝试在不同选项卡之间拖放多个元素。

在此jsfiddle ，当一个项目被拖动时，我想将所有其他选中的项目一起拖动，比如 Gmail当您从 inbox 移动多封电子邮件时会发生什么到另一个文件夹。

我觉得有必要用ui.helper但我没有足够的查询技巧。

以下是我目前正在使用的代码:

$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
  accept: ".connectedSortable li",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
    var $item = $( this );
    var $list = $( $item.find( "a" ).attr( "href" ) )
      .find( ".connectedSortable" );
    ui.draggable.hide( "slow", function() {
      $tabs.tabs( "option", "active", $tab_items.index( $item ) );
      $( this ).appendTo( $list ).show( "slow" );
    });
  }
});

Answer 1

经过大量摆弄，我根据我的 answer here 想出了以下内容

基本上，我们使用 data() 保存所选项目，将选项卡初始化为 droppable() 并将所选项目附加到 sortable on drop 事件中。

$('.connectedSortable').on('click', 'input', function() {
  $(this).parent().toggleClass('selected');
});

$("#sortable1, #sortable2").sortable({
  revert: 0,
  helper: function(e, item) { //create custom helper
    if (!item.hasClass('selected')) item.addClass('selected');
    // clone selected items before hiding
    var elements = $('.selected').not('.ui-sortable-placeholder').clone();
    //hide selected items
    item.siblings('.selected').addClass('hidden');
    return $('<ul/>').append(elements);
  },
  start: function(e, ui) {
    var $elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
    //store the selected items to item being dragged
    ui.item.data('items', $elements);
  },
  stop: function(e, ui) {
    //show the selected items after the operation
    ui.item.siblings('.selected').removeClass('hidden');
    //unselect since the operation is complete
    $('.selected').removeClass('selected');
    $(this).find('input:checked').prop('checked', false);
  }
});

var $tabs = $("#tabs").tabs(),
  $tab_items = $("ul:first li", $tabs).droppable({
    accept: "ul, .connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      var $item = $(this),
        $elements = ui.draggable.data('items'),
        $list = $($item.find("a").attr("href")).find(".connectedSortable");
      ui.draggable.show().hide("slow", function() {
        $tabs.tabs("option", "active", $tab_items.index($item));
        $(this).appendTo($list).show("slow").before($elements.show("slow"));

      });
    }
  });

ul {
  list-style-type: none;
}
.connectedSortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.chbox {
  margin-right: 10px;
}
.selected {
  background: red !important;
}
.hidden {
  display: none !important;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
  </ul>
  <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 1</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 2</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 3</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 4</li>
    </ul>
  </div>
  <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
  </div>
</div>

---

Updated Fiddle