vue+jsplumb使用过程中怎么禁用拖拽线的端点--学习心得

1、全局在main.js文件中引入 jsplumb

复制代码
import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

2、在使用的页面进行初始化实例,注意要在mounted中触发

复制代码
jsPlumbLeftInit() {
    this.jsRightPlumb = this.$jsPlumb.getInstance({
      Container: "svgRightLine", //选择器id
      dragOptions: {
        containment: "children",
      },
      EndpointStyle: { radius: 0.1, fill: "#6173FA" }, //端点样式
      PaintStyle: { stroke: "#6173FA", strokeWidth: 8 }, // 绘画样式,默认8px线宽  #456
      Connector: ["Flowchart", { gap: 1 }], //要使用的默认连接器的类型:折线,流程等Flowchart
    });
}

3、通过接口API获取到渲染的数据

复制代码
eg:
   let data =[[{},{},{},{}],[{},{},{},{}]]

每一条数据要有一个唯一的标识‼️‼️

画线的source和target都是在页面中找唯一的ID类名进行渲染的。

4、页面UI是多边形展示,通过css画出来页面并绑定唯一的ID值。

5、jsplumb 斜线样式

复制代码
const connectorOptions = {
    endpoint: "Dot",
    connector: "Straight",
    paintStyle: {
      stroke: color,
      strokeWidth: 4,
      dashstyle: lineType,
    },
    hoverPaintStyle: {
      stroke: "#1E90FF",
    },
    isSource: true,
    isTarget: true,
};

6、画线逻辑

(1)固定渲染【第一组】【第二组】的点;

(2)依次渲染【第三组】【第四组】的店,注意组装数据;

7、阻止用户拖拽连线的端点方法

(1)在页面渲染流程图的同级写个div,设置样式。

复制代码
position:absolute;
z-index:99;

(2)流程图的圈圈支持点击动作,跳转到连线的详情页面,单独在父元素设置样式。

复制代码
position:absolute;
z-index:100;

8、最后就皆大欢喜啦~

但是jsplumb插件是有专业方法API来实现的,但是不知道为什么我的代码不行,有大佬可以指教。

附上专业API方法:

复制代码
// 获取指定元素的DOM元素
let node = document.getElementById('portId')
// 禁用节点的拖放
jsPlumb.setDraggable(node, false);
// 启用节点的拖放功能
jsPlumb.setDraggable(node, true);
相关推荐
帅夫帅夫1 分钟前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易5 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球8 分钟前
前端实现文本描边
前端·canvas
snakeshe10109 分钟前
1. 实现 useEffect
前端
前端进阶者11 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_13 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
Nu1120 分钟前
@babel/preset-env的corejs、@babel/plugin-transform-runtime的corejs之间区别
前端·babel
用户698135449106121 分钟前
three.js绘制中国地理数据
前端
爱学习的茄子21 分钟前
JavaScript闭包实战:防抖的优雅实现
前端·javascript·面试
前端付豪21 分钟前
9、前端日志埋点系统的架构设计
前端·javascript·架构