AngularJS - 将拖拽与流程图相结合

Question

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

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

提前致谢.... :)

Answer 1

有趣的项目！我相信SVG和D3.js与AngularJS相结合将是完美的。 d3可以包装到AngularjS指令中。它有很多很酷的功能，从头开始构建起来很繁琐。以下是我将如何处理这个问题。

有一个流程图容器指令，它从主控制器获取数据模型。数据模型包含有关每个框的信息[通过框表示文本1，文本2等图表上的信息]。然后，流程图容器可以遍历数据模型，并为每个框创建一个指令。你可以＆＃34;循环＆＃34;通过使用ng-repeat之类的东西通过数据模型。现在，这是另一个指令发挥作用的地方。称之为TheBox。 TheBox负责绘制框。您可以轻松地使用SVG来实现此目的。此外，您可以将d3.js的拖动功能放在TheBox指令的链接功能中。

了解更多信息： http://d3js.org/

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

我希望我的答案能以某种方式帮助你！