Example combing jquery drag and drop and tabs_问答_开发者

I have seen some good examples of how to use jquery to do drag and drop and separately on how to do tabs.

Does anyone have or know of an example that combines the two?

Basically say you have a <div> on the left of the screen with draggable objects and then you can drop them into one of the tabs on the right side of the screen.

Also, would like to know how to let someone drop it into the visible tab, but also drop the item into the tab label for a hidden tab and have the object drop in there. Ideally you would want that hidden tab to become visible so 开发者_JAVA百科the user could see that the item dropped in properly.

Here's an example from my answer to another similar question which:

Hides the items from current tab
Open the dropped tab and displays the dropped items
Supports dragging multiple items

Seems pretty much like what you're asking for...

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>

$('.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

The following code snippet is for drag drop of contents from one tab to the another. I have tried this in IE 9 and it is working fine. The stylesheet I have referred from jquery-ui site. Hope this will help.

Drag Drop Tabs

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