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

【问题标题】：raphael drag and drop object from one container to another containerraphael 将对象从一个容器拖放到另一个容器
【发布时间】：2013-02-19 04:53:31
【问题描述】：

我已经能够在同一张纸上拖放元素。现在我需要能够将 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 元素

&lt;svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" &lt;/svg&gt;

首先，有可能吗？如果可能的话，请给我一些线索如何做到这一点。谢谢！

【问题讨论】：

你之前是如何在同一张纸上拖动的？
只使用 raphaeljs 拖动处理程序。

标签： html svg raphael

【解决方案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};
            }

【讨论】：