脚本宝典收集整理的这篇文章主要介绍了jsplumb+dragable+vue(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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...
以上是脚本宝典为你收集整理的jsplumb+dragable+vue(一)全部内容,希望文章能够帮你解决jsplumb+dragable+vue(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。