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 detect if a shape is in the process of being dragged from the palette


I have implemented a tooltip on nodes and connectors based on a technique provided earlier on these forums.
That works great.

My problem is as follows.
If I drag an existing node across another node the dragEnter event fires and the tooltip will show - not what I want.
I have fixed this by setting a flag when the drag event starts, and resetting it when args.dragState === 'completed'.
So far so good.

This issue arises when I drag a shape (symbol) from the palette and I cross over an existing node - the tooltip will show since the dragEnter event fires.
I seem to have no way to detect that the shape is being dragged from the palette.

Is there such an event?
Is there some other technique I can use?

Thanks in advance for any advice.


Attachment: Syncfusion__Tooltip_Challenge__29nov2015_b1690912.zip

3 Replies

SG Shyam G Syncfusion Team November 30, 2015 12:10 PM UTC

Hi Jim,

You can achieve your requirement using drop event. In this event, you will get an args.source as a symbol palette. Based on this arguments, you can achieve your requirement. please refer to the code example below.

Code example:

//define drop event
            DiagramContent.ClientDrop = "drop";

function drop(args){

             if(args.source.cssClass && args.source.cssClass.indexOf("symbolpalette")!==-1 ){

                                //do the dragState===”completed” code here.


Shyam G

JJ Jim Jacobs November 30, 2015 08:12 PM UTC


The drop event is too late.
I need to be able to know that the shape is "being dragged" from the palette.
The drag event is not firing during this operation, so I need some other event or technique.


SG Shyam G Syncfusion Team December 1, 2015 11:35 AM UTC

Hi Jim,

Please use dragOver event to achieve your requirement and this event triggers only when we drag the element from the palette onto the diagram. please refer to the code example below.

Code example:


            dragOver: dragOver,


        function dragOver(args) {

            //do your code here
Shyam G

Live Chat Icon For mobile
Up arrow icon