jQuery EasyUI ツリーメニュー -ツリーメニューのドラッグ＆ドロップ制御

アプリケーションでツリー（Tree）プラグインを使用する場合、ドラッグ（drag）とドロップ（drop）機能は、ユーザーがノードの位置を変更できるようにするために必要です。ドラッグ（drag）とドロップ（drop）操作を有効にするには、ツリー（Tree）プラグインの 'dnd' プロパティを true に設定するだけです。

ツリーメニュー（Tree）の作成

    $('#tt').tree({
        dnd: true,
        url: 'tree_data.json'
    });

ツリーノード上でドロップ操作が発生すると、'onDrop' イベントがトリガーされます。ノードの状態をリモートサーバーに保存するなど、何らかの操作（またはそれ以上の操作）を行う必要があります。

    onDrop: function(targetNode, source, point){
        var targetId = $(target).tree('getNode', targetNode).id;
        $.ajax({
            url: '...',
            type: 'post',
            dataType: 'json',
            data: {
                id: source.id,
                targetId: targetId,
                point: point
            }
        });
    }

jQuery EasyUI サンプルをダウンロード

jeasyui-tree-tree5.zip