We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to style drag/drop

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?

3 Replies

SG Shyam G Syncfusion Team August 1, 2019 04:33 AM

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; 
Shyam G  

CC Chad Carey August 1, 2019 07:54 AM

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.

SG Shyam G Syncfusion Team August 2, 2019 02:12 AM

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 
    .e-diagram-highlighter { 
        stroke: #0078d6; 
        stroke-width: 2; 
Shyam G 

Live Chat Icon For mobile
Up arrow icon