Show / Hide Table of Contents

Drag and Drop

Basic

To enable drag and drop functionality set enableDragDrop option to true

 
    var chart = new OrgChart(document.getElementById("tree"), {
        enableDragDrop: true,   
        ...
    });

In the example bellow drag and drop one of the nodes to see how it works


Events

If you want to conditionally cancel drag&drop operation add drop event handler
 
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
    });

    chart.on('drop', function (sender, draggedNodeId, droppedNodeId) {
        if (draggedNodeId == 1){
            return false;
        }

        if (droppedNodeId == 4){
            return false;
        }
    });

    chart.load([
        { id: 0 },
        { id: 1, pid: 0 },
        { id: 2, pid: 0 }
    ])