Html 将SVG拖放到Raphael上？

我即将开始一个新的项目，其中包括将对象（最好是SVG）从工具箱拖放到舞台上，我正在考虑使用Raphael.js来提供帮助

我遇到的问题是，我希望应用程序用户界面有一个用HTML创建的布局，包括可滚动的面板，包括工具箱。然后，我希望用户能够从工具箱中删除组件，并将其拖到“stage”上

我认为我的选择有两个：

1） 在Raphael中将整个UI创建为SVG。我猜在Raphael中创建一个包含可滚动面板的UI要比使用纯HTML困难得多，因为纯HTML会给我Flexbox和DIVs带来溢出：auto等

2） 在HTML中创建UI，并以某种方式将SVG组件从工具箱拖放到Raphael阶段，然后我可以允许用户将它们放到适当的位置。我甚至不确定这是否可能

---

我的断言正确吗？如果是这样，是否有可能检测到用户何时将鼠标移到舞台上，并以某种方式隐藏拖动帮助并在舞台内重新创建组件？

不久前我写过类似的内容。我将工具箱中的组件绘制为拉斐尔的个人画布。拖动时，我将此工具移出工作区域。放置时，我会计算出位置，然后在该位置的工作区域中创建一个新的Raphael对象。然后将拖动的对象放回工具箱中的正确位置。这适用于您的情况吗？

我看到的唯一问题是，我希望在鼠标进入阶段时切换到in-raphael组件，而不是在用户放下组件时。原因是，当用户在舞台上拖动组件时，我希望它能够检测到它何时与画布中已有的组件发生冲突。我使用SVG编辑的UI与您描述的类似，此演示仅在Chrome中工作，请浏览左侧面板。Raphael更有可能成为您用例中的一个障碍。