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>
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
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>
加载中,请稍侯......
精彩评论