前⾔：
jsplumb 有2个版本⼀个Toolkit Edition（付费版），另外⼀个就是Community Edition（社区版本）。Toolkit Edition版本功能集成的⽐较丰富，社区版本的就差好多，很多功能都没有，需要我们⾃⼰去添加，当然了⾃⼰添加多多少少有些⿇烦，⽽且也不完善。但是我们还是⽤Community Edition（社区版本），毕竟不收费，没办法，下边所说的版本默认都是以社区版。 jsplumb.png
上图也就是我这次⽤到的jsplumb实现的功能，连接线能够拖拽⽣成，也可以删除，编辑label。 1、数据结构
</ul>
</div>
<el-dialog
title="修改label名称"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-input v-model="labelName" placeholder="请输⼊"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="changeNote">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ChartNode from "@/components/ChartNode";
export default {
name: "test6",
data() {
return {
dialogVisible:false,
labelName:"",
curSourceId:'',
curTargetId:'',
addLabelText:'',//拖拽后⽣成的连线label⽂字
每个人的战争jsp:null,
myscale:1,
curScreen:[],//当前屏幕宽⾼
chartData: {
nodes: [],
connections: [],//{ "targetId": "box2", "sourceId": "box1" }
props: {},
screen:[610,610]//提交屏幕宽⾼
},
list: [
{
icon: "el-icon-goods",
text: "伴随车牌",
type: "circle",
id:'li1'
一个直立的火柴盒},
{
icon: "el-icon-bell",
text: "常住⼈⼝筛选",
type: "diamond",
id:"li2"
笨猪四国
},
{
icon: "el-icon-date",
text: "伴随imsi",
type: "circle",
id:"li3"
}
]
};
},
mounted() {
let _this = this
var $section = $('#focal');
var $panzoom = $section.find('.panzoom').panzoom({
minScale: 0.3,
maxScale:2,
eventNamespace: ".panzoom",
$zoomRange: $(".jtk-endpoint"),
$set: $section.find('.jtk-overlay'),
eventsListenerElement: document.querySelector('.box')
});
$(document).on('mouseover','.box,.jtk-draggable,.jtk-overlay,.ep',function(){
张悦然十爱
$('.panzoom').panzoom("disable");
})
$(document).on('mouseleave','.box,.jtk-draggable,.jtk-overlay,.ep',function(){
$('.panzoom').panzoom("enable");
})
let instance = Instance({
PaintStyle:{
strokeWidth:2,
stroke:"#567567",
},
// Connector: ["Straight", { stub: [0,0], gap:[-30,-30] }],
Connector:[ "Straight", { curviness: 0 } ],
Endpoint: ["Blank",{ cssClass: "chart-dot", hoverClass: "chart-dot-hover", radius: 5 }],
EndpointStyle : { fill: "blue" },
HoverPaintStyle:{水土保持学报
stroke:"red",
},
DragOptions: { cursor: "pointer", zIndex: 2000 },
ConnectionOverlays: [
[
"Arrow",
{
location: 1,
visible: true,
width: 11,
length: 11,
id: "ARROW",
events: {
click: function() {
alert("you clicked on the arrow overlay");
}
}
}
],
["Label", { label: "", id: "label", cssClass: "aLabel" }]
],
Container: "panzoom"
})
_this.jsp = instance;
//拖拽功能
var els = document.querySelectorAll(".box");
instance.draggable(els,{
containment:true,
filter: ".ep",//除去不能拖拽的
grid:[50,50]
});
//不允许拆卸连接，不设置的话默认是可以的
instance.importDefaults({
ConnectionsDetachable:false
});
// 监听拖动connection 事件，判断是否有重复链接仇岗卫士
instance.bind("beforeDrop", function(info) {
// Overlay("label").tion.id);
console.log(info);
// 判断是否已有该连接
let isSame = true;
_tions.forEach(item => {
if ((item.targetId === info.targetId && item.sourceId === info.sourceId) || (item.targetId === info.sourceId && item.sourceId === info.targetId)) { isSame = false;
}
});
if (isSame) {
_this.addLabelText = "新label"
_tions.push({
sourceId: info.sourceId,
targetId: info.targetId,
label:_this.addLabelText
});
} else {
alert("不允许重复连接！");
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议