详解js中构造流程图的核心技术JsPlumb

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了详解js中构造流程图的核心技术JsPlumb，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

项目里面用到了Web里面的拖拽流程图的技术JsPlumb，其实真不算难，不过项目里面用HTML做的一些类似flash的效果，感觉还不错，在此分享下。

一、效果图展示

1、从左边拖动元素到中间区域，然后连线

2、连线类型可以自定义：这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等

3、鼠标拖动区域选中元素，并且选中元素统一拖动位置。

4、对选中的元素左对齐。

5、对选中元素居中对齐

6、右对齐

7、上对齐

8、垂直居中对齐

9、下对齐

10、根据第一个选中的元素上下靠拢

11、根据第一个选中的元素左右靠拢

12、根据第一个选中的元素同高

13、根据第一个选中的元素同宽

14、选中元素顺时针旋转，点击一次旋转45度

15、选中元素逆时针旋转。

16、选中统一删除元素以及元素上面的连线

这里很多效果其实在项目中作用并不太大，很多单纯就是为了展示用的。

二、代码详解

这里涉及的效果比较多，可能要分多篇来介绍。这篇还是来看看构造流程图的核心技术：JsPlumb。

1、概述 关于JsPlumb的内容，在此就简单说明下吧。jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大。本项目中还是结合大家最熟悉的JQuery来讲解。并且还要注意的一点就是JsPlumb的浏览器兼容性，JsPlumb支持IE 6以上、火狐、谷歌等各种浏览器

2、使用 （1）引入JS文件 可以直接去官网上面下载最新的js库，由于JsPlumb需要JQuery的支持，按照网上的说法，它只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。所以我们需要下载较高一点版本的JQuery和JQuery UI。关于JsPlumb的内容只需要引用一个Js即可。类似

（2）初始化 使用JsPlumb需要注意一点，JsPlumb的连线的样式是由点确定的，也就是说点的样式里面包含了相关的属性来说明当使用此点来连线的时候，连线的样式应该是什么样的。 在我们项目里面，左边的模型区域，中间才是设计区域。那么要将一个元素从模型区域创建出来，就要用到我们JQuery UI里面的draggable和droppable事件。首先我们注册左边模型的draggable和中间区域的droppable事件。

cshtml页面代码，

表示中间区域容器。 　　　　　　

  • 工位

    • Js代码：

    首先我们定义几个点的样式的全局变量

    然后再页面初始化完成之后注册事件

    //中间拖拽区的drop事件 $("#divCenter").droppable({ scope: "plant",drop: function (event,ui) { // 创建工厂模型到拖拽区 CreateModel(ui,$(this)); } });

    　　　　　　　　});

    //1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式）
    function CreateModel(ui,selector) {
    //1.1 添加html模型
    var modelid = $(ui.draggable).attr("id");
    i++;
    var id = modelid + i;
    var cur_css = modelid;
    var type = $(ui.helper).attr("dbtype");
    $(selector).append('<div class="node ' + cur_css + '" id="' + id + '" dbtype="' + type + '" parentid="' + $(selector).attr("id") + '" onclick="oInitElement.GetPropertiesByType(\'' + type + '\',this)" ondblclick="InitStation().DbClick(\'' + type + '\',this)" >' + $(ui.helper).html() + '

    ');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $("#" + id).css("left",left).css("top",top);
    //jsPlumb.setContainer($("#divCenter"));
    //1.2 添加连接点
    jsPlumb.addEndpoint(id,{ anchors: "RightMiddle" },hollowCircle);
    jsPlumb.addEndpoint(id,{ anchors: "LeftMiddle" },{ anchors: "TopCenter" },{ anchors: "BottomCenter" },hollowCircle);
    jsPlumb.draggable(id);

    //1.3 <a href="/tag/zhuce/" target="_blank" class="keywords">注册</a>实体可draggable和resizable
$("#" + id).draggable({
  containment: "parent",start: function () {
    startMove();
  },drag: function (event,ui) {
    MoveSelectDiv(event,ui,id);
    jsPlumb.repaintEverything();
  },stop: function () {
    jsPlumb.repaintEverything();
  }
});

$("#" + id).resizable({
  resize: function () {
    jsPlumb.repaintEverything();
  },stop: function () {
    jsPlumb.repaintEverything();
    //oInitElement.SendPropRequest("DTO_TM_PLANT",$(this));
  }
});
return id;

    };

    重点来看看这一句：

    jsPlumb.addEndpoint(id,hollowCircle); 调用了JsPlumb里面的addEndpoint方法，第一个参数表示页面标签的id，第一个表示连线点的位置（RightMiddle、LeftMiddle、TopCenter、BottomCenter四个选项）；第三参数表示点的样式以及连线的样式。没调用依次addEndpoint方法，元素上面就会多一个连线的节点。关于hollowCircle里面各个参数的意义，可以查看api。

    还有一句多个地方都看到了：

    jsPlumb.repaintEverything(); 看字面意思大概能知道这句是干什么的，修复所有。当在中间区域拖动元素的时候，如果不带这一句，节点不会跟着元素一起移动。加上之后节点才会跟随标签移动。至此，最基础的JsPlumb连线就完成了。

    以上就是本文的全部内容，希望能够帮助大家学习掌握流程图的核心技术JsPlumb。

    jsJsPlumb流程图流程图

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作