Allow Node Drag and Drop

The wijtree allows you to create drag-and-drop nodes using the allowDrag and allowDrop properties. These nodes can be moved within one folder, or between folders. This topic will walk you through setting the properties to allow you to move nodes. See the Drag and Drop > Tree sample of the MVC Control Explorer live demos at http://demo.componentone.com/ASPNET/MVCExplorer/tree/DragDrop.

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div>
        <ul id="tree1">
            <li><a><span>Folder 1</span></a>
                <ul>
                    <li><a><span>Folder 1.1</span></a></li>
                    <li><a><span>Folder 1.2</span></a></li>
                    <li><a><span>Folder 1.3</span></a></li>
                    <li><a><span>Folder 1.4</span></a></li>
                    <li><a><span>Folder 1.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>Folder 2</span></a>
                <ul>
                    <li><a><span>Folder 2.1</span></a></li>
                    <li><a><span>Folder 2.2</span></a></li>
                    <li><a><span>Folder 2.3</span></a></li>
                    <li><a><span>Folder 2.4</span></a></li>
                    <li><a><span>Folder 2.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>Folder 3</span></a>
                <ul>
                    <li><a><span>Folder 3.1</span></a></li>
                    <li><a><span>Folder 3.2</span></a></li>
                    <li><a><span>Folder 3.3</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
    <p>
        Between 2 trees</p>
    <div>
        <ul id="tree2">
            <li><a><span>Folder 4</span></a>
                <ul>
                    <li><a><span>Folder 4.1</span></a></li>
                    <li><a><span>Folder 4.2</span></a></li>
                    <li><a><span>Folder 4.3</span></a></li>
                    <li><a><span>Folder 4.4</span></a></li>
                    <li><a><span>Folder 4.5</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>Folder 5</span></a>
                <ul>
                    <li><a><span>Folder 5.1</span></a></li>
                    <li><a><span>Folder 5.2</span></a></li>
                    <li><a><span>Folder 5.3</span></a></li>
                    <li><a><span>Folder 5.4</span></a></li>
                    <li><a><span>Folder 5.5</span></a></li>
                </ul>
            </li>
        </ul>
    </div>

Insert the following script to initialize the widget:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var tv = $("#tree1").wijtree({ allowDrop: true, allowDrag: true });
            $("#tree2").wijtree({ allowDrop: true, allowDrag: false });
        });      
    </script>

Run the program. You should be able to drag nodes between the sets of wijtree widgets.