从DOM拖拽，放置在画布或SVG中

Question

我即将建立一个工具，允许用户从列表中拖动物品并将它们放在画布上，以构建树形/组织图。

想知道是否有可能拖动普通的li节点到画布/svg上，并检测放置在画布上的位置和元素是什么?

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

- Mickel

Answer 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

- Phrogz

Answer 2

使用Raphael会让你感到轻松。 快速开发，创建SVG并将其拖放到 转换工具中

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

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

- Chasbeen

---

谢谢，我最终使用了Raphaël，目前它一直表现良好！ - Mickel