AngularJS - 将拖放与流程图相结合答案

【问题标题】：AngularJS - Combining drag drop with flow chartAngularJS - 将拖放与流程图相结合
【发布时间】：2015-11-10 12:37:40
【问题描述】：

我正在尝试创建一个具有拖放功能的流程图，例如

组件列表是动态的，每个组件最多可以出现一次，第一列和最后一列只能有一个组件，而它们之间的所有列最多可以有3个组件，这3个组件列可以有n个我调查了angularjs-flowchart 和 angular-dragdrop 但想不出办法将它们结合起来，任何想法

提前谢谢....:)

【问题讨论】：

标签： javascript jquery angularjs drag-and-drop flowchart

【解决方案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

希望我的回答对你有所帮助！

【讨论】：