ドラッグアンドドロップ動作を有効にする

Wijtreeウィジェットでは、ユーザーがノードをドラッグアンドドロップしてツリー構造を変更することができます。この再構造の動作は一つのツリー構造内または、ツリー同士の間で行うことが可能です。ノードのドラッグ・ドロップを有効にするには、allowDragとallowDropオプションの値をtrueに設定します。

allowDrag:　allowDrag オプションが true の場合、ユーザーがマウスでノードをドラッグして、ツリーのノードを再配置することができます。このオプションの既定値は false です。allowDrag を使用して、全体のツリーまたは単一のノードのドラッグ操作を制御することがかのうです。
allowDrop:　allowDrop が true の場合、ユーザーがドラッグされたノードをツリー内の対象の場所にドロップすることができます。このオプションの既定値は false です。allowDrop を使用して、全体のツリーまたは単一のノードへのドロップ操作を制御することが可能です。

次の例では、allowDrag と allowDrop オプションを使用して、ツリー内のノードのドラッグ．ドラップをカスタマイズする方法を示します。特定のツリーノードのドラッグアンドドロップを許可または制限することもできます。

この例では、「File」ノードでドラッグのみの操作、また「Edit」ノードでドロップのみの操作が許可されていますが、「Search」ノードでは、ドラッグ．ドロップの両方の操作が有効に設定されています。

ユーザーは特定のノードにドラッグ．ドラップ操作を指定していない場合は、親ノードの設定または、既定値が適用されます。

ライブウィジェット
スクリプト
Markup

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#tree").wijtree({ allowDrop: true, allowDrag: true }); //File folder and files allow drag, but not drop. $("#filemenu").add("#filemenu li").wijtreenode("option", "allowDrag", true) .wijtreenode("option", "allowDrop", false); //Edit folder and files allow drop, but not drag. $("#edit").add("#edit li").wijtreenode("option", "allowDrag", false) .wijtreenode("option", "allowDrop", true); //Search folder and files allow drag and drop both. $("#search").add("#search li").wijtreenode("option", "allowDrag", true) .wijtreenode("option", "allowDrop", true); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#tree").wijtree({
         allowDrop: true,
         allowDrag: true
        });
        //File folder and files allow drag, but not drop.
    $("#filemenu").add("#filemenu li").wijtreenode("option", "allowDrag", true)
                    .wijtreenode("option", "allowDrop", false);  
       //Edit folder and files allow drop, but not drag.            
    $("#edit").add("#edit li").wijtreenode("option", "allowDrag", false)
                    .wijtreenode("option", "allowDrop", true);
       //Search folder and files allow drag and drop both.            
    $("#search").add("#search li").wijtreenode("option", "allowDrag", true)
                    .wijtreenode("option", "allowDrop", true);         
           });
</script>

スクリプト	コードのコピー
<div> <ul id="tree"> <li class="folder" id="filemenu"><a><span>File</span></a> <ul> <li class="file"><a><span>New</span></a></li> <li class="file"><a><span>Close</span></a></li> </ul> </li> <li class="folder" id="edit"><a><span>Edit</span></a> <ul> <li class="file"><a><span>Copy</span></a></li> <li class="file"><a><span>Paste</span></a></li> </ul> </li> <li class="folder" id="search"><a><span>Search</span></a> <ul> <li class="file"><a><span>Find</span></a></li> <li class="file"><a><span>Replace</span></a></li> </ul> </li> </ul></div>

スクリプト

コードのコピー

<div>
<ul id="tree">
   <li class="folder" id="filemenu"><a><span>File</span></a>
     <ul>
       <li class="file"><a><span>New</span></a></li>
       <li class="file"><a><span>Close</span></a></li>
    </ul>
   </li>
  <li class="folder" id="edit"><a><span>Edit</span></a>
     <ul>
      <li class="file"><a><span>Copy</span></a></li>
      <li class="file"><a><span>Paste</span></a></li>
    </ul>
 </li>
<li class="folder" id="search"><a><span>Search</span></a>
   <ul>
     <li class="file"><a><span>Find</span></a></li>
     <li class="file"><a><span>Replace</span></a></li>
   </ul>
 </li>
</ul></div>