使用jQuery UI“Accordion and Droppable” [英] Working with jQuery UI "Accordion and Droppable"

问题描述

我对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 =sortable1class =connectedSortable ui-helper-reset> 
< ; li class =ui-state-default>项目1< / li> 
< li< li>< ui-state-default>项目2< class =ui-state-default> Item 3< / li> 
< li class =ui-state-default> Item 4< ui-state-default>第5项< / li> 
< / ul> 
< / div> 
< / div> 
< div id =tabs-2> 
< h3> B< / h3> 
< div> 
< ul id =sortable2class =connectedSortable ui-helper-reset > 
< li< li class =ui-state-highlight>项目1< / li> 
< li class =状态高亮>第2项< / li> 
< li class =ui-state-highlight>第3项< / li> 
< li class =ui-state-highlight>第4项< / li> 
< li class =ui-state-highlight>第5项< / li> 
< / ul> 
< / div> 
< / div> 
  

脚本：

$ b $

  $（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）; 
} 
}） ; 
}）; 
  

解决方案

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

  $（＃sortable1，＃sortable2）.sortable（）。disableSelection（）; 
  

收件人：

  $（＃sortable1，＃sortable2）。sortable（{connectWith ['。connectedSortable']}）。disableSelection（）; 
  

但是，如果将另一个放入另一个列表中，您将遇到问题。

如果您添加事件：mouseover作为一个手风琴选项，它不会触发鼠标悬停，仍然在拖动。

要实现一次打开多个面板，您需要一个相当难看的解决方法，但是，嘿，它的工作原理！：

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

从这个答案中为会员Boaz提供beforeActivate函数： jQuery UI手风琴：一次打开多个面板

I have a question with jQuery UI Accordion and Droppable. How can I Drag an item from #tab-1 to #tab-2? I have view the demo in jqueryui.com "Sortable - Connect lists with Tabs", but I can't 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" );
        }
    });
});

解决方案

You can connect the lists by changing the line:

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

To:

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

But then you have the issue how to get the other one open to drop it into the other list.

If you add event: "mouseover" as an accordian option it won't trigger the mouseover while you're still dragging.

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

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

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

这篇关于使用jQuery UI“Accordion and Droppable”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！