从 DOM 拖动，放入 Canvas 或 SVG答案

【问题标题】：Drag from DOM, drop in Canvas or SVG从 DOM 拖动，放入 Canvas 或 SVG
【发布时间】：2011-07-05 19:38:38
【问题描述】：

我即将构建一个工具，允许用户从列表中拖动项目并将它们放到画布中以构建树/组织结构图。

想知道是否可以将常规的 li-node 拖到画布/svg 上并检测画布上的哪个位置以及正在丢弃的元素？

也许您有比使用 canvas/svg 更好的建议？我唯一的要求是用户应该能够直观地从列表中拖动项目来构建图形/组织结构图。

【问题讨论】：

【解决方案1】：

是的，可以拖动到/越过另一个元素并确定您在该元素上的位置。对于 SVG，您需要使用如下代码将鼠标坐标转换为画布局部空间：

function mouseXY(evt){
  var mxy = svg.createSVGPoint();
  mxy.x = evt.clientX;
  mxy.y = evt.clientY;
  return mxy.matrixTransform(svg.getScreenCTM().inverse());
}

对于 Canvas，您可能希望确保画布的 .style.offsetWidth 与其 width 相同，或者在它们之间进行转换以进入本地空间。（仅当您调整画布的显示大小时。）

然而，与 Canvas 相比，SVG 的优点之一是它是一个“保留图形模式” 绘图 API。除其他外，这允许您将事件处理程序放在 SVG 元素本身上并检测它们上的 mouseover 事件，而不是尝试从坐标确定您在哪个对象上方。（后者是您需要对 Canvas 执行的操作，因为画布上没有“对象”，只有在绘制后会立即干燥的颜料像素。）

我个人建议将您的 SVG 直接嵌入 XHTML，而不是通过 <object> 或 <img>，这样您就有一个 document 来处理。这是我的一个示例页面，它将多个 SVG 嵌入到单个 XHTML 页面中：http://phrogz.net/SVG/convert_path_to_polygon.xhtml

【讨论】：

【解决方案2】：

你会发现拉斐尔很容易加快开发速度，创建您的 SVG 并将其放入转换器工具在

http://irunmywebsite.com/raphael/svgsource.php 拖放示例

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones

【讨论】：

谢谢，我实际上最终使用了 Raphaël，到目前为止它运行良好！