拖拽实现流程图Drawflow.js插件

拖拽实现流程图Drawflow.js插件源码下载

看看谁在用

查看文件结构

文件大小:6.72M

资源分类: 插件-其它前端代码

更新时间: 2021-11-04

Drawflow.js是动态生成的JavaScript库,通过拖拽实现一个流程图。

更多API方法
// get node from ID
editor.getNodeFromId(id)

// get nodes from name
editor.getNodesFromName(name)

// remove a node
editor.removeNodeId(id)

// add input to node
editor.addNodeInput(id)

// add output to node
editor.addNodeOutput(id);

// remove input from node.
editor.removeNodeInput(id, input_class)

// remove output from node
editor.removeNodeOutput(id, output_class)

// add a connection
editor.addConnection(id_output, id_input, output_class, input_class)

// remove connection
editor.removeSingleConnection(id_output, id_input, output_class, input_class)

// update connections between nodes
editor.updateConnectionNodes(id) 

// remove a collection between nodes
editor.removeConnectionNodeId(id);

// get module from node ID
editor.getModuleFromNodeId(id) 

// clear the data of the selected node
editor.clearModuleSelected();

// clear all data
editor.clear();

// zoom in/out
editor.zoom_in();
editor.zoom_out();
事件处理
editor.on('nodeCreated', function(id) {
  // do something
})

editor.on('nodeRemoved', function(id) {
  // do something
})

editor.on('nodeDataChanged', function(id) {
  // do something
})

editor.on('nodeSelected', function(id) {
  // do something
})

editor.on('nodeUnselected', function(id) {
  // do something
})

editor.on('nodeMoved', function(id) {
  // do something
})

editor.on('connectionCreated', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})

editor.on('connectionRemoved', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})

editor.on('connectionSelected', function(ouput_id, input_id, ouput_class, input_class) {
  // do something
})

editor.on('connectionUnselected', function() {
  // do something
})

editor.on('connectionStart', function(output_id, output_class) {
  // do something
})

editor.on('connectionCancel', function() {
  // do something
})

editor.on('addReroute', function(id) {
  // do something
})

editor.on('removeReroute', function(id) {
  // do something
})

editor.on('rerouteMoved', function(id) {
  // do something
})

editor.on('moduleCreated', function(name) {
  // do something
})

editor.on('moduleChanged', function(name) {
  // do something
})

editor.on('moduleRemoved', function(name) {
  // do something
})

editor.on('mouseMove', function(x, y) {
  // do something
})

editor.on('mouseUp', function(event) {
  // do something
})

editor.on('keydown', function(event) {
  // do something
})

editor.on('click', function(event) {
  // do something
})

editor.on('clickEnd', function(event) {
  // do something
})

editor.on('contextmenu', function(event) {
  // do something
})

editor.on('zoom', function(zoom_level) {
  // do something
})

editor.on('translate', function(x, y) {
  // do something
})

editor.on('import', function() {
  // do something
})

editor.on('export', function(data) {
  // do something
})

拖拽实现流程图Drawflow.js插件

正在加载文件目录...

也许你还喜欢

  1. vuejs流程图树菜单
  2. css组织机构多级拓扑图代码
  3. jquery流程图结构代码
  4. js可拖拽工作流程图设置插件
  5. HTML5流程图拖拽定义JS插件
  6. jQuery流程图制作插件
网站顶部导航带下拉的Navigation
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器