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);
相关推荐
paopaokaka_luck16 分钟前
基于Spring Boot+Vue的巴彦淖尔旅游网站(AI问答、腾讯地图API、WebSocket及时通讯、支付宝沙盒支付)
数据库·vue.js·spring boot·websocket·mysql·毕业设计·旅游
初心w50t221 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}21 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter2 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
陈cCCc2 小时前
记录第一次npm发包!!!
vue.js·npm