raphael将对象从一个容器拖放到另一个容器

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!

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};
            }