Node not draggable

[Stephen]

Hi

I have created an org diagram. I need the nodes to be draggable. I'm not sure what I'm doing wrong. Here is my code

<ejs-diagram id="diagram" width="100%" height="700px" getNodeDefaults="@ViewBag.nodeDefaults" getConnectorDefaults="@ViewBag.ConnectorDefaults" created="diagramCreated" drop="NodeDrop">
            <e-diagram-datasourcesettings id="Id" parentId="Manager" dataSource="new DataManager() { Data = (List<OrganizationalDetails>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-layout type="OrganizationalChart" getLayoutInfo="@ViewBag.GetLayoutInfo" ></e-diagram-layout>
        </ejs-diagram>

function diagramCreated() {
    var diagram = document.getElementById("diagram").ej2_instances[0];
    diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
    diagram.dataBind();
}
 
 
function getLayoutInfo(node, options, orientation, type) {
    if (node.data.Name === 'General Manager') {
        options.assistants.push(options.children[0]);
        options.children.splice(0, 1);
    }
    if (!options.hasSubTree) {
        options.type = 'Right';
    }
}
 
function nodeDefaults(obj, diagram) {
    obj.shape = {
        type: 'Text', content: obj.data.Name,
        margin: { left: 10, right: 10, top: 10, bottom: 10 }
    };
    obj.backgroundColor = obj.data.Color;
    obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };
    obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };
    obj.expandIcon.verticalAlignment = 'Center';
    obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
    obj.collapseIcon.offset = { x: .5, y: 1 };
    obj.collapseIcon.verticalAlignment = 'Center';
    obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
    obj.collapseIcon.height = 10;
    obj.collapseIcon.width = 10;
    obj.collapseIcon.shape = 'None';
    obj.collapseIcon.fill = 'lightgray';
    obj.width = 120;
    obj.height = 30;
    obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop | ej.diagrams.NodeConstraints.Drag; 
    return obj;
}
 
function connectorDefaults(connector, diagram) {
    connector.targetDecorator.shape = 'None';
    connector.type = 'Orthogonal';
    connector.constraints = 0;
    connector.cornerRadius = 0;
    return connector;
}

[Gowtham Gunashekar]

Hi Stephen, 

 

On the further analysis on the shared code, we found you have set the diagram tool as “ZoomPan” in diagramCreated event. In the ZoomPan tool, we can only zoom and pan the diagram, we cannot able to select and drag the node. We suggest you to set Default as diagram tool to drag the node. We have added the suggested changes in the below sample. 

 

Code snippet: 

function diagramCreated() { 

    var diagram = document.getElementById("diagram").ej2_instances[0]; 

    diagram.tool = ej.diagrams.DiagramTools.Default; 

    diagram.dataBind(); 

} 

 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DragOrgChart-1335797297.zip 

 

Regards, 

Gowtham 

[Stephen]

Thank you, all in order now.

[Gowtham Gunashekar]

Hi Stephen,   

   

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards,   

Gowtham