raphael將對象從一個容器拖放到另一個容器

Question

我已經能夠將元素拖放到同一張紙中。 現在我需要能夠將raphael元素從一個紙容器拖放到另一個紙容器中。 這是一個例子：

從第一個svg拖到第二個svg

html中的第一個svg元素

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

html中的第二個svg元素

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

首先，有可能嗎？ 如果可能的話，請給我一些線索如何做到這一點。 謝謝！

Answer 1

幾天后，我通過簡單的javascript和svg向用戶提供了“拖放”功能。 其中我給出了一個函數，它確定鼠標指針的確切位置，無論平移或縮放。 看看它，看看它對你有用。 （我不知道它在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};
            }