ComponentOne Studio MVC5 Classic ヘルプ
allowDrag および allowDrop プロパティの使用
MVC Classic ウィジェット > Wijtree > allowDrag および allowDrop プロパティの使用

wijtree では、allowDrag および allowDrop プロパティの使用してドラッグ＆ドロップ操作が可能なノードを作成できます。 これらのノードは１つのフォルダ内またはフォルダ間を移動することができます。このトピックでは、ノードを移動可能にするプロパティを設定する手順について説明します。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/tree/DragDrop）にアクセスし、MVC コントロールエクスプローラの Drag and Drop > Tree サンプルのライブデモをご覧ください。

  1. ASP.NET MVC 5 Wijmo アプリケーションを作成します。
  2. ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。
  3. 以下のマークアップをページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div>
        <ul id="tree1">
            <li><a><span>フォルダ 1</span></a>
                <ul>
                    <li><a><span>フォルダ 1.1</span></a></li>
                    <li><a><span>フォルダ 1.2</span></a></li>
                    <li><a><span>フォルダ 1.3</span></a></li>
                    <li><a><span>フォルダ 1.4</span></a></li>
                    <li><a><span>フォルダ 1.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>フォルダ 2</span></a>
                <ul>
                    <li><a><span>フォルダ 2.1</span></a></li>
                    <li><a><span>フォルダ 2.2</span></a></li>
                    <li><a><span>フォルダ 2.3</span></a></li>
                    <li><a><span>フォルダ 2.4</span></a></li>
                    <li><a><span>フォルダ 2.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>フォルダ 3</span></a>
                <ul>
                    <li><a><span>フォルダ 3.1</span></a></li>
                    <li><a><span>フォルダ 3.2</span></a></li>
                    <li><a><span>フォルダ 3.3</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
    <p>
        二つのツリーの間</p>
    <div>
        <ul id="tree2">
            <li><a><span>フォルダ 4</span></a>
                <ul>
                    <li><a><span>フォルダ 4.1</span></a></li>
                    <li><a><span>フォルダ 4.2</span></a></li>
                    <li><a><span>フォルダ 4.3</span></a></li>
                    <li><a><span>フォルダ 4.4</span></a></li>
                    <li><a><span>フォルダ 4.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>フォルダ 5</span></a>
                <ul>
                    <li><a><span>フォルダ 5.1</span></a></li>
                    <li><a><span>フォルダ 5.2</span></a></li>
                    <li><a><span>フォルダ 5.3</span></a></li>
                    <li><a><span>フォルダ 5.4</span></a></li>
                    <li><a><span>フォルダ 5.5</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
  4. 以下のスクリプトを挿入して、ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var tv = $("#tree1").wijtree({ allowDrop: true, allowDrag: true });
            $("#tree2").wijtree({ allowDrop: true, allowDrag: false });
        });       
    </script>
  5. プログラムを実行します。 wijtree ウィジェットのセット間でノードをドラッグできるようにします。

 

 

Copyright © GrapeCity inc. All rights reserved.