draganddrop.html

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <!-- Initialize TreeView -->
        <div id="tree"></div>
    </div>
</div>
<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>

<div id="action-description">
    <p>This sample demonstrates the drag and drop functionality of the TreeView. To drag-and-drop single node, drag the desired node and drop under the target node by releasing the mouse. To drag-and-drop multiple nodes, select and drag the desired nodes and then drop it to the target node. The dragged nodes will be dropped as the same level under the target node.</p>
</div>

<div id="description">
    <p>The <code>TreeView</code> component allows the user to drag any node and drop the child or sibling to any other nodes. This is enabled by the <code>allowDragAndDrop</code> property.</p>
    <p>In this demo, TreeView is enabled with multiple selection, and drag and drop.</p>    
    <p>For more information, you can refer to the <a href="http://ej2.syncfusion.com/documentation/treeview/drag-and-drop.html" target="_blank">Drag and Drop</a> section from the documentation.</p>
</div>