vue3 中使用 jsPlumb 开发流程图,jquery-ui元素拖拽

问题遇到的现象和发生背景

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
        })
    }
})

我想要达到的结果

拖拽元素不会触发拖拽连接