Working with the jQuery Accordion and Droppable UI

Question

I have a question with jQuery UI Accordion and Droppable. How to drag an item from # tab-1 to # tab-2? I am viewing the demo at jqueryui.com "Sortable - Connects Lists to Tabs", but I cannot use this for Accordion :(

HTML:

<div id="tabs"> <div id="tabs-1"> <h3>A</h3> <div> <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> <div id="tabs-2"> <h3>B</h3> <div> <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> 

Script:

 $(function() { $( "#sortable1, #sortable2" ).sortable().disableSelection(); var $tabs = $( "#tabs" ).accordion({ heightStyle: "content", collapsible: true, header: "> div > h3", beforeActivate: function( event, ui ) { $("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 34 ); }, activate: function( event, ui ) { $("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 32 ); } }).sortable({ axis: "y", handle: "h3", stop: function( event, ui ) { ui.item.children( "h3" ).triggerHandler( "focusout" ); } }); }); 

Answer 1

You can concatenate lists by changing the line:

 $( "#sortable1, #sortable2" ).sortable().disableSelection(); 

To:

 $( "#sortable1, #sortable2").sortable({connectWith['.connectedSortable']}).disableSelection(); 

But then you had a problem with how to make another open it in another list.

If you add event: "mouseover" as a matching parameter, it will not trigger the event: "mouseover" while you are still dragging.

To open multiple panels at once, you need a rather unsightly workaround, but hey, it works !:

http://jsfiddle.net/ZjvWN/2/

Credit for beforeActivate function for Boaz member from this answer: jQuery UI accordion: open several panels at once