Raphael- Detect overlapped elements when drag and drop

Question

I'm trying to get element by drag and drop another element. I have for example 2 circles: c1 and c2. What i want to do is : if i drop c2 above c1 hence they are overlapped(not entirely necessary), i can get circle c1 (ex:id, title... etc).

http://jsfiddle.net/Tomen/LYjnV/1/

Is there a way to do it?

Answer 1

I'm not sure if you want the moving element that collides, or the static one that is collided with - so I'll give both. (it sounds like you want the static one, but it is this one which Element.onDragOver gives, as suggested in Oli's comment)

Here is a rudimentary jsfiddle which accesses both elements:

• For the static element that is collided with, it uses Raphael's Element.onDragOver
• For the moving element that is being dragged, it uses some basic code based loosely on how jQuery UI's Draggable and Droppable libraries do this, as described here - by placing the dragged object in the global namespace while it is being dragged, and then accessing it from there.

It's possible Raphael already has a feature like this for accessing the dragged element, but if it does I haven't managed to find it looking in the docs, code or DOM.

My implementation of the second point is an extremely basic demonstration which would need improvement. For something more complete, I'd recommend reading and taking inspiration from the code used by the heavily tested and refined jQuery UI to do the same thing