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

Answer 2

以下代码段用于将内容从一个选项卡拖放到另一个选项卡。我已经在IE 9中尝试了这个，它工作正常。我从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>

梳理jquery拖放和制表符的示例

2 个答案:

DEMO