jQuery UI Sortable - Connect lists with Tabs
<!-- jQuery UI Effects Blind 1.7.2 Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. --> <!doctype html> <html lang="en"> <head> <title>jQuery UI Sortable - Connect lists with Tabs</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.sortable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <script type="text/javascript" src="js/ui/ui.tabs.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <script type="text/javascript"> $(function() { $("#sortable1, #sortable2").sortable().disableSelection(); var $tabs = $("#tabs").tabs(); var $tab_items = $("ul:first li",$tabs).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function(ev, ui) { var $item = $(this); var $list = $($item.find('a').attr('href')).find('.connectedSortable'); ui.draggable.hide('slow', function() { $tabs.tabs('select', $tab_items.index($item)); $(this).appendTo($list).show('slow'); }); } }); }); </script> </head> <body> <div class="demo"> <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">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> </div> <div id="tabs-2"> <ul id="sortable2"class="connectedSortable ui-helper-reset"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </div> </div> </div><!-- End demo --> <div class="demo-description"> <p> Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above. </p> </div><!-- End demo-description --> </body> </html> Related examples in the same category
