javascript - 剣道UIでパネルバーをドラッグアンドドロップする方法は?

Question

私のプロジェクトでは、グラフを含むパネル バーをドラッグ アンド ドロップする必要があります。ドラッグ アンド ドロップは可能ですか? 可能であれば、剣道UIの例を教えてください。

Answer 1

開発を簡素化する Kendo UI Widget (非公式) があります。

パネル コンテンツが次のように定義されている場合:

<div class="panel-container">
    <div class="panel">
        <ul id="panelbar0" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected">Graph #0</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
            </li>
        </ul>
        <ul id="panelbar1" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected"> Graph #1</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
            </li>
        </ul>
        <ul id="panelbar2" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected"> Graph #2</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
        </ul>
        <ul id="panelbar3" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected"> Graph #3</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
            </li>
        </ul>
        <ul id="panelbar4" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected"> Graph #4</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
            </li>
        </ul>
        <ul id="panelbar5" class="ob-panel-bar">
            <li class="k-state-active">
                <span class="k-link k-state-selected"> Graph #5</span>
                <div><div>Hello, world!</div><div>Hello, world!</div><div>Hello, world!</div></div>
            </li>
        </ul>
    </div>
</div>

パネルを初期化するための次の JavaScript:

$("#panelbar0").kendoPanelBar({
    expandMode: "multiple"
});
$("#panelbar1").kendoPanelBar({
    expandMode: "multiple"
});
$("#panelbar2").kendoPanelBar({
    expandMode: "multiple"
});
$("#panelbar3").kendoPanelBar({
    expandMode: "multiple"
});
$("#panelbar4").kendoPanelBar({
    expandMode: "multiple"
});
$("#panelbar5").kendoPanelBar({
    expandMode: "multiple"
});

以下を追加するだけです:

$(".panel-container").kendoOBSortableGrid({
    hint: function (element) {
        return element.clone().addClass("ob-being-dragged");
    }
});

ここでデモを参照してください: http://jsfiddle.net/OnaBai/WxUUL/