0

私はjavascriptとjqueryの連中を助けてくれるのは初めてです。

次のようにドラッグするリストがあります

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

そしてそれを落とします

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

リストをドロップすると、アコーディンに変換する必要があります

私のドラッグアンドドロップコードは

$( ".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);
}

最初のドラッグのみがアコーディオンを取得し、その後クラスは追加されません

カテゴリオブジェクトで addClass('ui-accordion') も使用しましたが、まだ機能していません

わからないので助けてください

http://jsfiddle.net/ZXYrx/

以下は私が欲しいもののスクリーンショットです

ここに画像の説明を入力

4

2 に答える 2

2

各ドロップでアコーディオンを再作成する必要があるため、次の手順を実行します。

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

破棄によってコンテンツが削除される場合は、まずコンテンツを取得してvar html = $('#accordion').html();から破棄します。その後、再作成する前にコンテンツを設定します。

于 2012-09-03T10:14:44.623 に答える
0

わかりました... Kostantin が言っているのと同じです。ちなみに、アコーディオンを破壊して再現する必要があります。

お気に入り：

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( '#accordion' ).accordion( "detroy" ); // <-- destroy
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});
于 2012-09-03T10:19:54.560 に答える