Use Custom Drag-and-Drop

The wijtree widget supports setting custom behaviours for the drag-and-drop properties, allowDrag and allowDrop. This topic will walk you through creating two wijtree elements and a trash element. You will be able to drag nodes between the wijtree elements and to the trash element. See the Custom Drag and Drop > Tree sample of the MVC Control Explorer live demos at http://demo.componentone.com/ASPNET/MVCExplorer/tree/CustomDragDrop.

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>
    <div id="trash" class="ui-widget-content">
        <h4 class="ui-widget-header">
            <span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
        <ul>
        </ul>
    </div>
    <div style="clear: both">
    </div>
    <p>
        Clone node to this tree:</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>

Use the following CSS style to control the appearance of the Web page.

<style>
        #trash
        {
            float: right;
            min-height: 12em;
            padding: 1%;
            width: 32%;
        }
        #trash ul
        {
            list-style: none;
        }
       
        #trash ul li
        {
            margin-bottom: 10px;
        }
       
        div.wijmo-wijtree
        {
            float: left;
        }
       
       
        .dropVisual
        {
            height: 1px;
            font-size: 0px; /*fix ie 6 issue*/
            background-color: Red;
        }
    </style>

Insert the following script to initialize the widgets:

<script id="scriptInit" type="text/javascript">
         $(document).ready(function () {
             var span = "<span class=\"ui-widget-content helperInner\">";
             $("#tree1").wijtree({
                 allowDrop: false,
                 allowDrag: true,
                 dropVisual: function () {
                     return $("<div>").addClass("dropVisual");
                 },
                 appendTo: 'body',
                 draggable: {
                     revert: "invalid",
                     start: function (event, ui) {
                         ui.helper.html(ui.helper.html() + span);
                     },
                     drag: function (event, ui) {
                         var inner = ui.helper.children(".helperInner");
                         if (inner.length) {
                             inner.html("x:" + event.pageX + " y:" + event.pageX);
                         }
                     },
                     stop: function (event, ui) {
                         $(this).hide()
                         $(this).show("highlight", 500);
                     }
                 }
             });
             var getInitMarkup = function (dragNode) {
                 var node = dragNode.clone();
                 node.find("a").unwrap().unwrap();
                 node.find("li>span,>span").remove();
                 return node;
             };
             $("#tree2").wijtree({
                 allowDrop: true,
                 allowDrag: false,
                 droppable: {
                     drop: function (event, ui) {
                         var dragNode = ui.draggable,
                        p = ui.newParent,
                        po = ui.newIndex, node;
                         node = getInitMarkup(dragNode);
                         if (p.is(":wijmo-wijtree")) {
                             p.wijtree("add", node, po);
                         }
                         else {
                             p.wijtreenode("add", node, po);
                         }
                     }
                 }
             });
             $("#trash").droppable({
                 activeClass: "ui-state-hover",
                 hoverClass: "ui-state-active",
                 scope: "tree",
                 // accept: "li",
                 drop: function (event, ui) {
                     var node = ui.draggable;
                     delTreeNode(node, this);
                 }
             });
             var delTreeNode = function (node, trash) {
                 var parent = node.parent()
                .closest(":wijmo-wijtreenode,:wijmo-wijtree");
                 if (parent.is(":wijmo-wijtreenode")) {
                     parent.wijtreenode("remove", node);
                 }
                 else {
                     parent.wijtree("remove", node);
                 }
                 node.appendTo($(trash).children("ul:eq(0)"));
             }
         });      
    </script>

Run your program. Your Web page will display two sets of wijtree widgets and a trash area. You should be able to move the nodes between the widgets and into the trash.