javascript - 「ネストされたセットモーダル」を作成するためにドラッグアンドドロップで JavaScript UI を作成するにはどうすればよいですか?

Question

MySQL での階層データの管理に関する Mike Hillyer のブログ投稿のグラフィックをエミュレートして、ユーザーがネストされたセット モデルに階層データをドロップ アンド ドラッグできるようにするユーザー インターフェイスを JavaScript で作成したいと考えています。

これを実現する JavaScript や jQuery アプリの例やデモはありますか?

Answer 1

ファイルツリーを使用してみてください。

シンプルでパワフルな自分で作った、このドラッグアンドドロップデモをチェックしてください

まだgithubリポジトリを更新する必要がありますが、プラグインにこの小さな関数を追加してjsonエクスポートを許可できます（ここでは、値が引用符を取得しないと仮定しています）

    $.fn.jtreeGetJson = function()
    {   var t = $(this).children('li');
        var json = '[';
        t.each(function(n,e)
        {   if(n>0) json += ',';
            json += '{';
                var span = $(e).children('span');
                json += '"label":"'+span.html()+'"';
                var ref = span.data('ref');
                if(ref !== undefined) json += ',"ref":"'+ref+'"';
                /*var d = span.data('info'); if(d === undefined) d = {};
                if(!$.isEmptyObject(d))
                {   json += ',"data":{';
                    var nb=0;
                    $.each(d, function(n,v){ if(nb++) json += ','; json += '"'+n+'":'+'"'+v+'"'; });
                    json += '}';
                }*/
                var u = span.next('ul');
                if(u.length)
                {   json += ', "subs":';
                    json += $.fn.jtreeGetJson.call(u);
                }
            json += '}';
        });
        json += ']';
        return json;
    }