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

标签 javascript jquery angularjs drag-and-drop flowchart

我正在尝试创建具有拖放功能的流程图,例如 enter image description here

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

提前致谢....:)

最佳答案

有趣的项目!我相信 SVG 和 D3.js 与 AngularJS 的结合将是完美的。 d3 可以包装到 AngularjS 指令中。它有很多很酷的功能,从头开始构建可能很乏味。以下是我将如何解决这个问题。

有一个从主 Controller 获取数据模型的流程图容器指令。数据模型包含有关每个框的信息[我所说的框是指图表上的文本 1、文本 2 等]。然后流程图容器可以循环遍历数据模型并为每个框创建一个指令。您可以使用 ng-repeat 之类的东西“循环”数据模型。现在这里是另一个指令发挥作用的地方。称之为 TheBox。 TheBox 负责绘制盒子。为此,您可以轻松地使用 SVG。此外,您可以将 d3.js 的拖动功能放在 TheBox 指令的链接功能中。

更多信息: http://d3js.org/

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

希望我的回答能对您有所帮助!

关于javascript - AngularJS - 将拖放与流程图相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32057775/

相关文章:

javascript - 使用 window.location.href 进行完全重定向

javascript - 在事件处理程序中获取表单元素

php - 检索重定向 url 的内容 | curl 与上下文

javascript - jQuery 'on' 事件在 'load' 事件后不起作用

javascript - 从 Angular 4 应用程序接收时表示接收空请求正文

html - Angular : How to uncheck all checkboxes with a link?

asp.net - 在 VS2008 中重用 Javascript 例程的最佳方法是什么?

jquery 增量旋转按钮

javascript - 单击jquery的增量变量

javascript - 使用 AngularJS 基于来自另一个字段的输入的数据将选项填充到选择中