jquery - 结合 jquery 拖放和选项卡的示例

Question

我已经看到了一些关于如何使用 jquery 进行拖放的很好的示例，以及如何单独执行选项卡的示例。

有人有或知道结合两者的例子吗？

基本上说你有一个 <div>屏幕左侧带有可拖动对象，然后您可以将它们放入屏幕右侧的选项卡之一。

此外，我想知道如何让某人将其放入可见选项卡中，同时将项目放入隐藏选项卡的选项卡标签中，并将对象放入其中。理想情况下，您希望隐藏的选项卡变得可见，以便用户可以看到该项目已正确放入。

Answer 1

这是我的 answer 中的一个示例到另一个类似的question其中:

• 隐藏当前选项卡中的项目
• 打开已放置的选项卡并显示已放置的项目
• 支持拖动多个项目

看起来很像你所要求的......

HTML

<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>
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 5</li>
    </ul>
</div>
<div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">

    </ul>
</div>

JS

$('.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');
    var helper = $('<ul/>');
    return helper.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);
  },
  update: function (e, ui) {
    //manually add the selected items before the one actually being dragged
    ui.item.before(ui.item.data('items'));
  },
  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');
     //uncheck since the operation is complete
    $(this).find('input:checked').prop('checked',false);
  }
}).disableSelection();

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

DEMO