结合jquery拖放和制表符的示例

Question

我见过一些很好的例子，说明了如何使用jquery进行拖放操作，以及如何使用选项卡。

有没有人有或者知道一个结合了这两者的例子？

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

另外，我想知道如何让别人将其放入可见标签中，但也要将项目放入隐藏选项卡的标签中，并将对象放入其中。理想情况下，您会希望隐藏的选项卡变得可见，这样用户就可以看到正确放置的项目。

Answer 1

下面的代码片段用于将内容从一个选项卡拖放到另一个选项卡。我已经在IE9中尝试过了，它工作得很好。我从jquery-ui站点引用的样式表。希望这能有所帮助。

拖放选项卡

<html>
<head>
<title>Drag Drop Tab</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
    var isAutoSelectable = false;
    $(function () {
        $( "#tabs" ).tabs();

        $("#tabs-1 li, #tabs-2 li, #tabs-3 li").draggable({
            appendTo: "body",
            helper: "clone",
            drag: function(){
                isAutoSelectable = true;
            }
        }).css('z-index','-1');

        $("#hdr-2,#hdr-3,#hdr-1").hover(function(e)
        {
            if(isAutoSelectable)
            {
                var index = e.currentTarget.id.split("-")[1] -1;
                $('#tabs').tabs( "option", "active", index );
            }
        });

        $("#tabs-1, #tabs-2, #tabs-3").droppable({
            drop: function(event,ui)
                    {
                        isAutoSelectable = false;
                        ui.draggable.detach().appendTo($(this)[0].childNodes.item(0));
                    }
        });

    });
</script>
</head>
<body>
<div id="tabs">
    <ul>
    <li><div id="hdr-1" style="height:25px;width:25px"><a href="#tabs-1">Nunc tincidunt</a></div></li>
    <li><div id="hdr-2" style="height:25px;width:25px"><a href="#tabs-2">Proin dolor</a></div></li>
    <li><div id="hdr-3" style="height:25px;width:25px"><a href="#tabs-3">Aenean lacinia</a></div></li>
    </ul>
<div id="tabs-1">
    <ul>
        <li>Lolcat Shirt</li>
        <li>Cheeseburger Shirt</li>
        <li>Buckit Shirt</li>
    </ul>
</div>
<div id="tabs-2">
    <ul>
        <li>Zebra Striped</li>
        <li>Black Leather</li>
        <li>Alligator Leather</li>
    </ul>
</div>
<div id="tabs-3">
    <ul>
        <li>Phone</li>
        <li>Ipad</li>
        <li>IPod</li>
    </ul>
</div>

</div>
</body>
</html>

Answer 2

下面是来自我的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