Javascript jsPlumb连接器显示错误路径

运行下面的代码段，将至少两个项目拖到中心，按“创建”按钮并尝试连接端点以查看问题

当我尝试连接来自不同div的端点时，它们实际上是连接的，但问题是，连接路径显示错误。它始终连接源端点所在的同一个div中的端点。尽管如此，如果您将鼠标悬停在我真正想要连接的点上，这表明连接已经完成，甚至拖动也可以工作。亲自尝试一下，获得完整的体验

$（文档）.ready（函数（）{
$（“#deviceName li”）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#接口li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#显示li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
$（'#输出li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
函数foo（）{
$（'.foo'）。每个（函数（）{
$（此）。可拖动({
包含：$（this）.parent（），
堆栈：'.foo'
});
});
}
$（'#mainDiv'）。可拖放({
drop：函数（事件、用户界面）{
如果（！ui.draggable.hasClass（'foo'））{
var title=ui.draggable.text（）.trim（）；
变量项=$（''）.append（''+标题+'链接1链接2'）；
item.draggable（）；
$（本）。追加（项目）；
foo（）；
}
}
});
});

html{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
背景#2c2c；
背景：url（数据：image/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIIA/PGO8C3ZNIHHTBG5ZPSJODHRWOI8VD3D3LNCZYLM9YZYD8YMDAWL3N2ZYIGD2LKDGGG9IJEWMCUIIGDMLLD0JVED0IMCAWIDEGMCHC2VYDMV3BC3BLY3R3RYXYBRP00IBM9UZSI+CIAGPGG8BMVHCKDYWYWYW5LKYKYW5LKYZZY2TCZ2TZ2VUZ2VUZ2VUZJJJJJJJJJJJJJJJ0IDV9IJ0IMV9V9IZZZZZZZZY2V9C）3.vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvC3RVCCBVZMZZZQ9IJEWMCUIHN0B3ATY29SB3I9IIMXMZMZMTMIIHN0B3ATB3BHY2L0ET0IMSIVPGOGIDWGLUZWFYR3JHZGLLBNQ+CIAGPHJLY3QGED0IMCIGE0IMCIGD2LKDG9IJEIGHLDODD0IMSIGZMLSB0IDXKCNNCMFKLXVJZ2CTZ2VZ2VZ2VZVZ2VZVZVZ2VUZZZVZZZZZZZZ2VZZZZZJJK9MCC+；
背景：-莫兹线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#2c2c2c）、颜色停止（37%、#3D3D）、颜色停止（66%、353535）、颜色停止（66%、353535）、颜色停止（100%、35313））；
背景：-webkit线性梯度（左，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
背景：-o-线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：-ms线性梯度（左，#2C2C0%，#3d3d3d 37%，35353566%，35353566%，35353566%，35313100%）；
背景：线性梯度（向右，#2C2C0%，#3D3D37%，35353566%，35353566%，353535100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2c2c2c'，endColorstr='#131313'，GradientType=1）；
}
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
#左撇子{
显示：内联块；
宽度：16%；
最小高度：100%；
右边框：3倍纯白；
框大小：边框框；
浮动：左；
保证金：0；
填充物：5px；
}
#mainDiv{
显示：内联块；
宽度：64%；
最小高度：100%；
右边框：3倍纯白；
框大小：边框框；
浮动：左；
保证金：0；
填充物：5px；
}
#右舵{
显示：内联块；
宽度：20%；
框大小：边框框；
最小高度：100%；
浮动：左；
保证金：0；
填充物：5px；
}
傅先生{
最大宽度：250px；
文本对齐：居中；
最小高度：50px；
边框：1px纯白；
边界半径：10px；
}
.foo表{
宽度：100%；
}
.thClass{
边界半径：10px；
边框底部：1px纯白；
保证金：0；
填充：0；
宽度：100%；
文本对齐：居中；
}
tableConn先生{
宽度：100%；
}

试验
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（“.tableConn”）.each（函数（）{
if（！$（this）.hasClass（“”“jsPlumb\u endpoint\u anchor”）{
jsPlumb.addEndpoint（$（此）{
主播：“对”，
来源：是的，
isTarget:没错，
连接器：“直”，
端点：“矩形”，
画风：{fillStyle:“白色”，大纲颜色：“蓝色”，大纲宽度：1}，
hoverPaintStyle:{fillStyle:“浅蓝色”}，
连接器样式：{strokeStyle:“蓝色”，线宽：1}，
connectorHoverStyle:{lineWidth:2}
});
jsPlumb.addEndpoint（$（此）{
主播：“左”，
来源：是的，
isTarget:没错，
连接器：“直”，
端点：“矩形”，
画风：{fillStyle:“白色”，大纲颜色：“蓝色”，大纲宽度：1}，
hoverPaintStyle:{fillStyle:“浅蓝色”}，
连接器样式：{strokeStyle:“蓝色”，线宽：1}，
connectorHoverStyle:{lineWidth:2}
});
}
});
});
});

设备名


项目1



接口