raphael drag and drop object from one container to another container

Question

I have been able to drag and drop element within same paper. Now I need to be able to drag and drop raphael element from one paper container to another. Here is the example:

drag from first svg to second svg

first svg element in html

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="260">
  <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="10" y="15" width="64" height="64" r="5" rx="5" ry="5" fill="#ffc0cb" stroke="#000">
  </rect>
</svg>

second svg element in html

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" </svg>

First of all, is it possible to do? If possible, please give me some clue how to do it. thanks!

Joo

How did you do the dragging before, within the same paper? – Ewer

just use raphaeljs drag handler. – Joo

Answer 1

couple of days later i provided a 'drag drop' functionality to a user, with simple javascript and svg. in which i gave a function which determine exact position of mouse pointer regardless of panning or zooming. have a look at it and see if its useful for you or not. (i don't know how it works in rapheal)

 var mainsvg = document.getElementsByTagName('svg')[0];
function mouseup(event) {
    var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your   svg.
}
    function getSvgCordinates(event) {
                var m = mainsvg.getScreenCTM();
                var p = mainsvg.createSVGPoint();
                var x, y;

                x = event.pageX;
                y = event.pageY;

                p.x = x;
                p.y = y;
                p = p.matrixTransform(m.inverse());

                x = p.x;
                y = p.y;

                x = parseFloat(x.toFixed(3));
                y = parseFloat(y.toFixed(3));

                return {x: x, y: y};
            }

Eligible