jsPlumb设置拖拽连接,并同时使用jquery-ui设置元素的拖拽,拖拽元素过程触发了现拖拽连线,这个怎么解决;
<div class="DrawContent padding-10" id="DrawContent">
<span id="start" class="item" style="left: 10px"></span>
<span id="item-1" class="item" style="left: 120px"></span>
<span id="item-2" class="item" style="left: 230px"></span>
</div>
// 拖拽连接
this.flowInst.makeSource('start', {
isSource: true,
isTarget: true
})
// 元素可拖拽
$(nodeClass).draggable({
addClass: false,
appendTo: $('#DrawContent'),
containment: $('#DrawContent'),
start: (event: any, element: any) => {
},
drag: (event: any, element: any) => {
this.flowInst.repaintEverything();
},
end(event: any, element: any){
}
})
拖拽元素时也会触发拖拽连接
在拖拽元素的start和end事件中修改拖拽连接的isTarget和isSource
$(nodeClass).draggable({
addClass: false,
appendTo: $('#DrawContent'),
containment: $('#DrawContent'),
start: (event: any, element: any) => {
this.flowInst.makeSource($(element.helper[0]).attr('id'), {
isSource: false,
isTarget: false
})
},
drag: (event: any, element: any) => {
this.flowInst.repaintEverything();
},
end(event: any, element: any){
this.flowInst.makeSource($(element.helper[0]).attr('id'), {
isSource: true,
isTarget: true
})
}
})
拖拽元素不会触发拖拽连接