4、jsplumb 在 dom 位置發(fā)生變化 jsplumb 監(jiān)聽(tīng)不到，所以連線位置不對(duì)。

場(chǎng)景：點(diǎn)擊按鈕查找parent 的關(guān)系，展示parent,相反查找 children, 但是按鈕盒子的位置變化了，連線位置沒(méi)有變化。

本來(lái)不打算單獨(dú)寫(xiě)這個(gè)博客的，在bug管理中單獨(dú)記錄了這個(gè)問(wèn)題，但是由于我解決的時(shí)間過(guò)長(zhǎng)，并且在國(guó)內(nèi)搜索不到有效的解決辦法，希望小伙伴不要像我這么浪費(fèi)時(shí)間。

因?yàn)閖splumb 連線的時(shí)候 是記錄的source 和 target 分別是 nodeId，當(dāng)你在傳入相同的 source 和 target jsplumb 認(rèn)為是同一條線，不會(huì)重新繪制。這個(gè)問(wèn)題困繞我一整天的時(shí)間，在同事的幫忙下才解決的，因?yàn)閲?guó)內(nèi)關(guān)于這個(gè)介紹的很少，沒(méi)有看到類(lèi)似的問(wèn)題，但是我相信肯定有這樣的API,于是讓我同事用英文的方式進(jìn)行搜索。

instance.reset() 清除jsplumb的所有連線關(guān)系，相當(dāng)于清楚 jsPlumb 的連線緩存

this.$nextTick(() => {<!-連線之前先把連線的關(guān)系清除-->this.datasetInstance.reset()jsPlumb.batch(() => {this.datasetEdges.forEach(item => {this.datasetInstance.connect({source: item.source,target: item.target,overlays: [], }, this.datasetCommon);});},true) }); 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5bf39ce3e51d4537d6742c09

總結(jié)

以上是生活随笔為你收集整理的jsplumb dom 位置发生变化，连线错位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。