7

我对 jQuery UI Accordion 和 Droppable 有疑问。如何将项目从#tab-1 拖到#tab-2？我在 jqueryui.com “Sortable - Connect lists with Tabs”中查看了演示，但我不能将它用于 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>

脚本：

$(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" );
        }
    });
});
4

1 回答 1

2

您可以通过更改行来连接列表：

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

至：

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

但是，您遇到了如何打开另一个以将其放入另一个列表的问题。

如果您添加event: "mouseover"为手风琴选项，则在您仍在拖动时不会触发鼠标悬停。

要同时打开多个面板，您需要一个相当难看的解决方法，但是嘿，它有效！：

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

从这个答案中将 beforeActivate 函数归功于成员 Boaz：jQuery UI 手风琴：一次打开多个面板

于 2013-06-19T11:24:11.513 回答