jEasyUI ツリー メニューのドラッグ アンド ドロップ コントロール

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

ツリーメニューの作成(ツリー)

	$('#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