Allow Drag and Drop

Wijtree widget allows users to drag and drop nodes and rearrange the structure of a tree. This reordering can be performed within a single tree or between two different tree widgets. To enable dragging and dropping of nodes, set the values of allowDrag and allowDrop options to true.

allowDrag: When set to true, allowDrag lets a user reorder nodes of a tree by dragging them using a mouse. By default, its value is false. You can use this option to allow or restrict drag operation for the entire tree, or also for a single node.
allowDrop: When set to true, allowDrop lets a user drop the dragged node to the target location inside a tree. By default, its value is false. You can use this option to allow or restrict drop operation for the entire tree, or also for a single node.

The example below demonstrates how a user can customize dragging and dropping of nodes in a tree by using allowDrag and allowDrop options. You can allow or restrict drag-drop for specific tree nodes as well.

Here, node FIle allows only dragging, node Edit allows dropping of a node onto it, but not dragging, whereas node Search allows both drag and drop operations.

If a user doesn't enable or disable the drag and drop options for a particular node, then its operations depend on the options set for its parent node, else default.

Live Widget
Script
Markup

Script	Copy Code
<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

Copy Code

<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	Copy Code
<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>

Script

Copy Code

<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>