在拉斐尔论文中拖放 dom 元素答案

【问题标题】：Drag and drop dom elements in raphael paper在拉斐尔论文中拖放 dom 元素
【发布时间】：2014-02-12 09:27:23
【问题描述】：

我正在使用 svg 并使用 Raphael js 在 svg 中创建动态对象。现在我想知道是否可以将一些预定义的形状从 html 列表拖放到 svg。

详情：

我有一些预定义的形状存储在侧栏中列出的数据库表中。每个形状都有自己的 json 字符串，这是我使用 Raphaël.JSON (https://github.com/ElbertF/Raphael.JSON#rapha%C3%ABljson-and-rapha%C3%ABlfreetransform) 完成的。

另一方面，我有一个 raphael 生成的 svg。

现在我想将每个预定义的形状拖到 raphael svg/paper。（我已经完成了使用 jquery ui 拖动非常容易的拖动）。删除列表后，我想渲染获取 json 字符串的对象（我已经完成了）。

但问题是我无法找到拉斐尔纸上的确切落点。我也在使用 panZoom 进行缩放和平移。我希望纸张缩小和缩小时的一致性。

屏幕截图：

拖动的对象是不是 svg 的图像。

在此先感谢您的帮助和感谢。

【问题讨论】：

标签： javascript html svg drag-and-drop 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};
                }

【讨论】：

谢谢 Rehan，我会看看这个解决方案。