how to style drag/drop

[Chad Carey]

I have a node template going and it lost the red borders when I drag a node over another node. In JS, how can I add those styles into my node template?

[Shyam G]

Hi Chad, 

 

Please set NodeConstraints as AllowDrop in setNodeTemplate function which shows the red highlighter, when we drag the node and mouse hover on the another node. please refer to a below code example. 

 

Code example: 

 

@Html.EJS().Diagram("diagram").Width("100%").Height("500px"). SetNodeTemplate("setNodeTemplate").Render() 

 

function setNodeTemplate(obj, diagram) {  

               //AllowDrop Constraints 

                obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop; 

} 

 

Regards, 

Shyam G  

[Chad Carey]

correct, the drag/drop functionality works fine but the highlighting no longer functions.

plus I would like to know how you can style the highlighting differently.

[Shyam G]

Hi Chad, 

 

By default, when we drag a node and hover on another node, red border appears and to change the border color, please use the below CSS in your application. Also, we have demonstrated an video to show the border color which appears on hovering the node over a another node. If we misunderstand your requirement, could you please share us more details such as explain your requirement with video or screenshot. 

 

Code example: 

// changed border color to blue 

<style> 

    .e-diagram-highlighter { 

        stroke: #0078d6; 

        stroke-width: 2; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/bordercolorsample-1711716897 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/bordercolorvideo-1774878686 

 

Regards, 

Shyam G