带拖放功能的 HTML 工作流设计器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13841038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Workflow designer w/ Drag and Drop
提问by James Boutcher
I have a need to build a workflow tool, allowing people to drag nodes onto a canvas, connect outlets of nodes to inputs of other nodes.. Zoom.. (An example I just found looks like the one covered in the 'automation' section here: http://bronto.com/platform/features)
我需要构建一个工作流工具，允许人们将节点拖到画布上，将节点的出口连接到其他节点的输入..缩放..（我刚刚发现的一个例子看起来像“自动化”部分中介绍的那个在这里：http: //bronto.com/platform/features）
Looking for suggestions on how to get started... Curious if there are frameworks/libraries anyone would recommend to make this easier, or just confirmation that I should just start whipping out Javascript to handle the drags/drops/line drawing/etc.
寻找关于如何开始的建议......好奇是否有任何人会推荐的框架/库使这更容易，或者只是确认我应该开始使用 Javascript 来处理拖放/画线/等。
回答by spacebiker
This question is quite old but in case anybody needs an updated answer, I would definitely give a try to the jQuery opensource project jsPlumb https://github.com/sporritt/jsPlumb.
这个问题已经很老了，但如果有人需要更新的答案，我肯定会尝试 jQuery 开源项目 jsPlumb https://github.com/sporritt/jsPlumb。
回答by buttercup
i've tried several workflow, flowchart and diagramming tools.
我尝试了几种工作流程、流程图和图表工具。
I found one which i could then make a HTML5 workflow diagram with editor, load and save data to and from server.
我找到了一个，然后我可以用编辑器制作 HTML5 工作流图，从服务器加载和保存数据。
This has almost all the features that can be used to make workflow diagrams:
这几乎具有可用于制作工作流图的所有功能：
1) Rich text inside a rectangle.
1) 矩形内的富文本。
2) Ability to customise shapes.
2）能够自定义形状。
3) Ability to add flow-chart symbols and fix back-end code.
3) 能够添加流程图符号和修复后端代码。
4) Works on Android, iOS, HTML5 browsers.
4) 适用于 Android、iOS、HTML5 浏览器。
5) Ability to add different kinds of lines to attach to different shapes and objects.
5) 能够添加不同种类的线条以附加到不同的形状和对象。
6) Able to correctly drag and drop elements, lines, shapes and rich text.
6) 能够正确拖放元素、线条、形状和富文本。
7) Able to create your own elements (sticky notes, UML objects, row-lanes, document objects, etc.)
7) 能够创建自己的元素（便签、UML 对象、行车道、文档对象等）
MIT Licensed.
麻省理工学院许可。
回答by orad
If you are on ASP.NET platform, try Orchard CMS. It has a Workflow Modulethat you can customize to your needs.
如果您使用的是 ASP.NET 平台，请尝试Orchard CMS。它有一个工作流模块，您可以根据自己的需要进行定制。
