2012-11-28 69 views
0

我即将开始一个新项目,其中涉及将工具箱中的对象(最好是SVG)拖放到舞台上,我正在考虑使用Raphael.js来提供帮助。将SVG拖放到Raphael上?

我遇到的问题是我希望应用程序UI在HTML中创建布局,包括可滚动面板,包括工具箱。然后,我希望用户能够从工具箱中获取组件,并将其拖到“舞台”上。

我觉得我的选择是双重的:

1)创建整个UI的在拉斐尔SVGs。我猜测,创建包括滚动面板的UI将更难在拉斐尔比用纯HTML这会给我Flexbox的和的div溢出:汽车等

2)在HTML中创建用户界面,不知何故拖拽SVG组件从工具箱拖放到Raphael舞台上,然后我可以让用户将它们放置到位。我不确定这甚至是可能的。

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

+0

我用SVG编辑的界面类似于你所描述的http://visualizame.net/editor/index.html这个演示只是在Chrome浏览器中工作,浏览左侧面板。拉斐尔更可能成为您的使用案例中的障碍。 – Duopixel

回答

0

我在不久前写过类似的文章。我在工具箱中绘制组件作为单独的Raphael画布。拖动时,我将此工具移出工作区域。放下时,我会进行计算以确定位置,然后在该位置的工作区中创建一个新的Raphael物体。拖动的对象然后放回工具箱中的适当位置。这是否适合你的情况?

+0

我可以看到的唯一问题是,当鼠标进入舞台时,而不是在用户放下组件时,我想切换到raphael组件。原因在于,当用户在组件周围拖动组件时,我希望它能够检测它何时与画布中已有的组件发生冲突。 – jonhobbs