javascript - 使用 jQuery UI “Accordion and Droppable” 第 2 部分

Question

处理同样的问题：使用 jQuery UI “Accordion and Droppable”

如果我想选择一个项目，然后将其放入手风琴（<h3>）中，然后将其附加到<ul>.

例如，将“Item 1”拖到“B”，然后将“Item 1”附加到黄色列表中。

我该如何修改程序？

$(function() {
    $( "#sortable1, #sortable2" ).sortable({connectWith: '.connectedSortable'}).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" );
        }
    });
});

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

Answer 1

您需要制作<h3>一个可放置的目标，然后在“drop”事件中将目标项附加到相应的<ul>.

见：http ://api.jqueryui.com/droppable/