JQuery UI - 使用两个手风琴拖放克隆

Question

我的代码中有两个手风琴。

第一个是“源”，第二个是“目的地”。

我想从源拖放到目标以克隆项目，结果将在源和目标中都有项目。

我似乎无法克隆该项目，有帮助修复它吗？

HTML 代码：

<ul class="accordion" id="source">
    <li>
        <h3>item1</h3>
        <div> description</div>
    </li>
    <li>
        <h3>item 2</h3>
        <div>description</div>
    </li>
</ul>

<ul id="destination" class="accordion">
     <li class="placeholder">add your item here</li>
</ul>

Javascript 代码：

$(function () {


    $(".accordion").accordion({
         collapsible: true
    });
    $("#source li").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#destination").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            console.log(ui.draggable.attr('data-class'));
            $(ui.draggable).clone().appendTo(this); // accordion not work 
            //$(ui.draggable).appendTo(this); // accordion work but not clone

        }
    })
});

示例：http://jsfiddle.net/8ZhL4/1/

Answer 1

在 Drop 函数中添加$(".accordion").accordion('refresh');。

样本：http://jsfiddle.net/8ZhL4/2/