jquery - jquery 动态拖放手风琴

Question

我是 javascript 和 jquery 的新手，请帮忙，

我有一个我拖动的列表，例如

<ul class='drag-list'>
    <li>category 1</li>
    <li>category2</li>
    ------------
    ------------
</ul>

把它放在

<div class='dropArea'>
    <div id="accordion"></div>
</div>

当我删除列表时，它应该转换为accordin

我的拖放代码是

$( ".drag-list li" ).draggable({        
    helper:"clone"
});

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});


Category = function(item){
    var category = $("<h3><a href='#'>"+item+"</a></h3> \
                      <div> \
                      <p>hello I am accordion</p> \
                      </div>");
    return category;
}

function addCategory(item) {
    var category = Category(item);
    $('#accordion').append(category);
}

只有第一个阻力 li 得到手风琴之后没有添加任何课程

我还在类别对象上使用了 addClass('ui-accordion') 但仍然无法正常工作

请帮助我想不通

http://jsfiddle.net/ZXYrx/

下面是我想要的截图

Answer 1

您必须在每次下降时重新创建手风琴，因此请执行以下操作：

    $( "#accordion" ).accordion('destroy').accordion({
        collapsible: true,
        header:'h3'
    });

如果销毁删除了您的内容，则先获取它var html = $('#accordion').html();，然后再销毁。然后在重新创建之前设置内容。

Answer 2

好的...就像 Kostantin 说的一样，顺便说一下，您需要销毁并重新制作手风琴：

像：

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( '#accordion' ).accordion( "detroy" ); // <-- destroy
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});