2013-06-18 15 views
7

Ich habe eine Frage mit jQuery UI Akkordeon und Droppable. Wie kann ich ein Element von # tab-1 nach # tab-2 ziehen? Ich habe die Demo in jqueryui.com sehen "Sortable - Schließen Sie Listen mit Tabs", aber ich kann das nicht für Akkordeon verwenden :(Arbeiten mit jQuery UI "Akkordeon und Droppable"

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"); 
     } 
    }); 
}); 
+0

Warum können Sie das jQuery UI-Plugin nicht verwenden? – rednaw

Antwort

2

Sie können die Listen verbinden, indem Sie die Zeile ändern:

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

An:

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

Aber dann haben Sie das Problem, wie die anderen bekommen offen in die andere Liste zu löschen.

Wenn Sie event: "mouseover" als Accordian-Option hinzufügen, wird der Mouseover nicht ausgelöst, während Sie noch ziehen.

zu öffnen, um mehr Platten zu erreichen, müssen Sie ein eher unschönes Problem zu umgehen, aber hey, es funktioniert !:

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

Kredit für die beforeActivate Funktion zum Mitglied Boaz aus dieser Antwort: jQuery UI accordion: open multiple panels at once

Verwandte Themen