RaphaelJS 2.0 onDragOver limitation

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!

 

EditorGridPanel drag and drop

If you are wondering why you are getting “sm.isSelected is not a function” error when trying to drag and drop records from EditorGridPanel then the answer is… CellSelectionModel.

Drag and drop in ExtJs works with RowSelectionModel but EditorGridPanel – with CellSelectionModel by default (which doesn’t implement isSelected method).

The quick and easy solution is to use RowSelectionModel instead (if it’s acceptable for you of course).

sm: new Ext.grid.RowSelectionModel()

Otherwise you most probably will have to override ExtJs implementation of drag and drop for EditorGridPanel.