jsplumb+dragable+vue(一)

最新推荐文章于 2024-07-10 10:40:35 发布

weixin_34275734

最新推荐文章于 2024-07-10 10:40:35 发布

阅读量1.7k

点赞数

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000016266087

版权

基于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" }); //保证拖动不跨界