AngularJS - 拖放与流程图相结合
AngularJS - Combining drag drop with flow chart
我正在尝试创建具有拖放功能的流程图，例如
组件列表是动态的，每个组件最多出现一次，
第一列和最后一列只能有一个组件，而它们之间的所有列最多可以有 3 个组件，这 3 个组件列可以有 n 个
我调查了 angularjs-flowchart
和
angular-dragdrop
但想不出结合它们的方法，任何想法
提前致谢....:)
有趣的项目！我相信 SVG 和 D3.js 结合 AngularJS 将是完美的选择。 d3 可以包装到 AngularjS 指令中。它有很多很酷的功能，从头开始构建可能很乏味。这是我解决问题的方法。
有一个从主控制器获取数据模型的流程图容器指令。数据模型包含有关每个框的信息[我所说的框是指图表上的文本 1、文本 2 等]。然后流程图容器可以循环遍历数据模型并为每个框创建一个指令。您可以 "loop" 通过使用诸如 ng-repeat 之类的东西来遍历数据模型。现在这里是另一个指令发挥作用的地方。称之为 TheBox。 TheBox 负责绘制盒子。为此，您可以轻松地使用 SVG。此外，您可以将 d3.js 的拖动功能放在 TheBox 指令的 link 函数中。
更多信息：
http://d3js.org/
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
希望我的回答对您有所帮助！
我正在尝试创建具有拖放功能的流程图，例如
组件列表是动态的，每个组件最多出现一次， 第一列和最后一列只能有一个组件，而它们之间的所有列最多可以有 3 个组件，这 3 个组件列可以有 n 个 我调查了 angularjs-flowchart 和 angular-dragdrop 但想不出结合它们的方法，任何想法
提前致谢....:)
有趣的项目！我相信 SVG 和 D3.js 结合 AngularJS 将是完美的选择。 d3 可以包装到 AngularjS 指令中。它有很多很酷的功能，从头开始构建可能很乏味。这是我解决问题的方法。
有一个从主控制器获取数据模型的流程图容器指令。数据模型包含有关每个框的信息[我所说的框是指图表上的文本 1、文本 2 等]。然后流程图容器可以循环遍历数据模型并为每个框创建一个指令。您可以 "loop" 通过使用诸如 ng-repeat 之类的东西来遍历数据模型。现在这里是另一个指令发挥作用的地方。称之为 TheBox。 TheBox 负责绘制盒子。为此，您可以轻松地使用 SVG。此外，您可以将 d3.js 的拖动功能放在 TheBox 指令的 link 函数中。
更多信息： http://d3js.org/
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
希望我的回答对您有所帮助！