New RaphaelJs 2.0 provides a function to detect if an element is being dragged over another element. It’s called onDragOver and is a shortcut for drag.over.<id> event.
It works very well for 2 elements being directly on top of each other. But if a third element appears in between then unfortunately events are not firing any more. According to the source code it was intentional and I guess functionality is not going to be extended any time soon.
This is a major problem if you have several cascading elements and you need to fire an event on each of them. Unfortunately Element.hover() event is not fired while drag and drop either (at least not in FF that I used for testing).
The only solution I found so far is to use Element.drag() with Element.getBBox() method and compare coordinates myself to determine whether mouse is inside the element “box”. It’s a very ugly solution especially if elements are not of a simple rectangular shape. Otherwise the only option I can see is to check if a dot is inside the polygon etc.
If you have any ideas on better solution please let me know!
Alexander Ramsey
July 8, 2016 at 9:02 pm
I am running into this right now. Possibly have to use linear inequality equations to determine if a circle element is on the right or left side of a path made into a symmetrical triangle. If you have ever figured out a better way to manage this, please email me! alexramsey92@gmail.com Thanks!