RSS

RaphaelJS 2.0 onDragOver limitation

15 Aug

Layers

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!

Advertisements
 
1 Comment

Posted by on August 15, 2011 in RaphaelJS

 

Tags: , , ,

One response to “RaphaelJS 2.0 onDragOver limitation

  1. 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!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: