我对 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" );
}
});
});
最佳答案
您可以通过更改行来连接列表:
$( "#sortable1, #sortable2" ).sortable().disableSelection();
收件人:
$( "#sortable1, #sortable2").sortable({connectWith['.connectedSortable']}).disableSelection();
但是您会遇到如何打开另一个列表以将其放入另一个列表的问题。
如果您添加 event: "mouseover"
作为 accordian 选项,它不会在您仍在拖动时触发鼠标悬停。
要实现同时打开多个面板,您需要一个相当难看的解决方法,但是,嘿,它有效!:
将 beforeActivate 函数归功于此答案中的成员 Boaz:jQuery UI accordion: open multiple panels at once
关于javascript - 使用 jQuery UI "Accordion and Droppable",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17165336/