jquery - jQueryUI 附加到手风琴

Question

根据 1.10 的文档，以下用于在放置时将项目附加到手风琴的代码（也在jsFiddle上）应该可以工作。

$( "#accordion" ).accordion();

$( "#accordionContainer" ).droppable({
    drop: function( event, ui ) {
        $( "<h3>New Item</h3>" ).appendTo( "#accordion" );
        $( "<div>New Description</div>" ).appendTo( "#accordion" );
        $( "#accordion" ).accordion( "refresh" );
    }
});

它没有。即使我明确指定了要添加它们的位置，附加的 h3 和 div 也会附加到错误的对象中。

文档附带了一个 jsFiddle示例，该示例显示了实际的功能，但对于新手来说，它太长太复杂，无法弄清楚有什么不同。我一定是犯了一个简单的错误。正确的？有什么想法吗？

难道没有办法让手风琴既是手风琴又是可放置的？然后如何指定正确的“this”作为追加的目标？

提前致谢。

Answer 1

试试这个低于 ui 版本 1.10:-

演示

$(function () {
    $(".draggable").draggable({
        revert: false,
        helper: "clone"
    });
    $("#accordion").accordion();
    $("#accordionContainer").droppable({
        drop: function (event, ui) {

            $("<h3>New Item</h3>").appendTo("#accordion");
            $("<div>New Description</div>").appendTo("#accordion");
            $("#accordion").accordion('destroy').accordion(); //<-- Here is the destruction and recreation
        }
    });


});

对于 ui 版本 1.10 刷新工作

演示

$(function () {
    $(".draggable").draggable({
        revert: false,
        helper: "clone"
    });
    $("#accordion").accordion();
    $("#accordionContainer").droppable({
        drop: function (event, ui) {

            $("<h3>New Item</h3>").appendTo("#accordion");
            $("<div>New Description</div>").appendTo("#accordion");
            $("#accordion").accordion('refresh'); //<-- Just a refresh
        }
    });


});