基于vue的jsplumb,支撑拖拽天生节点,节点双击展现更多信息,节点连线,删除节点,删除连线,重绘衔接图,当前页面革新衔接图,依据json画衔接图等功能
本章主要讲 拖拽天生节点 猎取链接图的信息
引入须要的文件
jquery-ui 由于要用dragable 所以引入了jquery-ui.min.js
jquery-ui.min.css
jquery.jsPlumb-1.4.0-all.js 画衔接图用
import $ from ‘jquery’; 由于用的vue所以jquery如许引入
拖拽
让节点能够拖拽
须要用的jq,起首猎取一切的节点,然后给他们设置draggable要领如许就能够拖拽了 详细的要设置拖拽节点的类名之类的能够网上查一下
drop拖拽放开会触发这个要领
比方拖拽后须要用户输入新建节点的名字之类的
新建节点
拖拽以后要在拖拽的位置天生一个实在的节点 而且上下左右能够恣意发出衔接线
1.在拖拽的地区append一个div 设置它的id,款式之类的以及坐标(drop要领里能够拿到)
2.天生上下左右能够连线的点
jsPlumb.addEndpoint(
Id,//上一步天生的id
{ anchors: "BottomCenter" },//能够发出衔接线的位置 有TopCenter,BottomCenter,LeftCenter,RightCenter四个方位
that.hollowCircle//衔接线的款式
);
jsPlumb.draggable(Id);//设置此节点能够拖拽
$("#" + Id).draggable({ containment: "parent" }); //保证拖动不跨界
3.用以上能够画出节点 以后能够随意连线啦!!!
猎取衔接图的信息
list = jsPlumb.getAllConnections();//猎取一切链接线的信息
list内里就是链接线信息 然后本身遍历须要的东西
节点的信息遍历元素 掏出须要的信息
早期进修的时刻参考的文章:
https://www.cnblogs.com/mq003…
https://github.com/leinue/jQu…