AngularJS - 将拖放与流程图相结合
Posted
技术标签:
【中文标题】AngularJS - 将拖放与流程图相结合【英文标题】：AngularJS - Combining drag drop with flow chart 【发布时间】：2015-11-10 12:37:40 【问题描述】：我正在尝试创建一个具有拖放功能的流程图，例如
组件列表是动态的，每个组件最多可以出现一次， 第一列和最后一列只能有一个组件，而它们之间的所有列最多可以有3个组件，这3个组件列可以有n个 我调查了angularjs-flowchart 和 angular-dragdrop 但想不出办法将它们结合起来，任何想法
提前谢谢....:)
【问题讨论】：
【参考方案1】：有趣的项目！我相信 SVG 和 D3.js 结合 AngularJS 将是完美的。 d3 可以包装到 AngularjS 指令中。它有很多很酷的功能，从头开始构建可能很乏味。以下是我解决问题的方法。
有一个流程图容器指令，从主控制器获取数据模型。数据模型包含有关每个框的信息[我的框是指图表上的文本 1、文本 2 等]。然后，流程图容器可以循环遍历数据模型并为每个框创建一个指令。您可以使用 ng-repeat 之类的东西“循环”通过数据模型。现在这是另一个指令发挥作用的地方。称之为TheBox。 TheBox 负责绘制盒子。为此，您可以轻松地使用 SVG。此外，您可以将 d3.js 的拖动功能放在 TheBox 指令的链接功能中。
更多信息： http://d3js.org/
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
希望我的回答对你有所帮助！
【讨论】：
以上是关于AngularJS - 将拖放与流程图相结合的主要内容，如果未能解决你的问题，请参考以下文章