1

項目を別のアコーディオンからドラッグしてアコーディオン コントロールに追加することはできますか?

  1. という名前のアコーディオンを作成しましたMainAccordion
  2. という名前の別のアコーディオンを作成しましたMenuAccordion
  3. MenuAccordionアイテムを からにドラッグしたいMainAccordion
4

1 に答える 1

3

少しコーディングする必要があるかもしれませんが、これは可能です。私はあなたのためにフィドルを作りました：http://jsfiddle.net/LfaRk/1/

それを見てみましょう。HTML は、CSS と同じように単純です。

JavaScript:

$(function () {
    $("#catalog").accordion();
    $("#catalog2").accordion();
    $("#catalog h2").draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("#catalog2").droppable({
        drop: function (event, ui) {
            var content = ui.draggable.next();
            ui.draggable.draggable('disable').appendTo(this);
            content.appendTo(this);
            $("#catalog").accordion('destroy').accordion();
            $("#catalog2").accordion('destroy').accordion();
        }
    });
});

それで、私は何をしているのですか？

  • で 2 つのアコーディオンを初期化してい.accordion()ます。
  • 最初のアコーディオンのヘッダーをドラッグ可能にしています。
  • 2 つ目のアコーディオンをドロップ可能にしています。

（私が始めたコードはhttp://jqueryui.com/droppable/#shopping-cartです。あなたもチェックしてください）

2 番目のアコーディオンのドロップ コールバックを見てみましょう。

drop: function (event, ui) {
    var content = ui.draggable.next();
    ui.draggable.draggable('disable').appendTo(this);
    content.appendTo(this);
    $("#catalog").accordion('destroy').accordion();
    $("#catalog2").accordion('destroy').accordion();
}

ここで何が起きてるの？

はui.draggable、現在ドラッグされている jQuery でラップされた要素です。2 番目のアコーディオンに挿入する必要があります。したがってui.draggable.appendto(this)、 を呼び出すことはできますが、ドラッグ可能のままなので、ドラッグ不可にする必要もあります。

ヘッダーを使用してコンテンツを移動する必要があるため、: でコンテンツを選択してから、:var content = ui.draggable.next()で移動しますcontent.appendTo(this);。thisまだドロップ可能な要素です (2 番目のアコーディオン)。

最後に、要素がどこにあるかを認識できるように、アコーディオンを再初期化する必要があります。

$("#catalog").accordion('destroy').accordion();
$("#catalog2").accordion('destroy').accordion();

そして、それは準備ができています。

アイテムを前後にドラッグできるようにしたい場合は、もう少しコーディングする必要があるかもしれません。また、アコーディオンをソート可能にしたい場合、ドロップ可能とソート可能は面白い方法で相互作用するように見えるので、少し実験する必要があるかもしれません.

于 2013-05-05T12:51:37.573 に答える