Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動連線和點(diǎn)擊連線)
前言
最近在做一個互動題板管理項(xiàng)目,主要負(fù)責(zé)開發(fā)互動題板的連線題,由于時間緊湊,一番search之后決定使用jsPlumb來做,本身jsPlumb做的是可以滑動連線的,奈何產(chǎn)品要同時兼容點(diǎn)擊,我想做過拖拽的前端小伙伴知道,拖拽和點(diǎn)擊兩者是有沖突問題; 拖拽比點(diǎn)擊多了個move的操作,所有我們可以通過鼠標(biāo)按下和抬起的位置來區(qū)分是否點(diǎn)擊或者是拖拽,
思路:
① 記錄鼠標(biāo)按下mousedown和鼠標(biāo)抬起mouseup的時候當(dāng)前的pageX和pageY,
② 通過開方將兩個位置坐標(biāo)進(jìn)行對比,當(dāng)值等于0或者小于10的時候證明當(dāng)前是點(diǎn)擊事件,反之則是拖拽事件
實(shí)現(xiàn)
下載依賴:
npm install jsplumb --save`
代碼
<template> <div id="container"> <div style="display: flex;margin-bottom: 50px"> <div v-for="(el, index) in up" :key="'up'+index" class="border" :id="'up-'+index" @mousedown="mouseDown($event,'up-'+index)" > {{el.txt}} </div> </div> <div style="display: flex"> <div v-for="(el, index) in below" :key="'below'+index" class="border" :id="'below-'+index" @mousedown="mouseDown($event,'below-'+index)"> {{el.txt}} </div> </div> </div> </template> <script> import { jsPlumb } from "jsplumb"; export default { name: 'HelloWorld', props: { msg: String }, data () { return { instance: null, up: [ { txt: "up1"}, { txt: "up2"}, { txt: "up3"}, { txt: "up4"}, ], below: [ { txt: "below1"}, { txt: "below2"}, { txt: "below3"}, { txt: "below4"}, ], curItem: "", pos: { pageX: 0, pageY: 0, }, clickItem: [] } }, beforeDestroy () { document.removeEventListener("mouseup", this.mock); }, mounted() { const _this = this; this.$nextTick(() => { jsPlumb.ready(function () { // 初始化jsPlumb 創(chuàng)建jsPlumb實(shí)例 _this.init(); // 設(shè)置可以為連線起點(diǎn)和連線終點(diǎn)的元素 _this.setContainer(); // 在連線事件中 只允許連接相鄰的列表 不能跨列表連接 _this.setRule(); jsPlumb.fire("jsPlumbDemoLoaded", _this.instance); }); }); document.addEventListener("mouseup", this.mock); }, methods: { init () { this.instance = jsPlumb.getInstance({ Container: "container", Connector: "Straight", ConnectionsDetachable: false, DeleteEndpointsOnDetach: false, Detachable: false, PaintStyle: { strokeWidth: 5, stroke: "#ffffff", dashstyle: "5 0.8", outlineStroke: "transparent", outlineWidth: 15 }, HoverPaintStyle: { strokeWidth: 5, stroke: "#368FFF", dashstyle: "5 0.8" }, Endpoint: ["Dot", { radius: 5 }], EndpointStyle: { fill: "transparent" } }); }, setContainer () { this.instance.batch(() => { for (let i = 0; i < this.up.length; i++) { this.initLeaf(`up-${i}`); } for (let j = 0; j < this.below.length; j++) { this.initLeaf(`below-${j}`); } }); }, setRule () { this.instance.bind("connection", () => { this.clickItem = []; }); }, initLeaf (id) { // anchor: ["Left", "Right"] 左右 const elem = document.getElementById(id); this.instance.makeSource(elem, { anchor: ["Top", "Bottom"], allowLoopback: false, maxConnections: -1 }); this.instance.makeTarget(elem, { anchor: ["Top", "Bottom"] }); }, mouseDown (e, index) { console.log("eee", e); this.curItem = index; this.pos = { pageX: e.pageX, pageY: e.pageY }; }, mock (e) { console.log("ee000e", e); // 模擬點(diǎn)擊 if ( Math.abs(e.pageX - this.pos.pageX) <= 10 && Math.abs(e.pageY - this.pos.pageY) <= 10 ) { if (this.clickItem.length > 0) { this.clickItem.push(this.curItem); this.instance.connect({ source: this.clickItem[0], target: this.clickItem[1] }); } else { this.clickItem.push(this.curItem); } } else { this.clickItem = []; } }, } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> #container { height: 100%; background-color: greenyellow; } .border { width: 120px; height: 50px; line-height: 50px; border-radius: 8px; border: 1px dashed black; margin: 20px; } </style>
實(shí)現(xiàn)效果
實(shí)現(xiàn)其實(shí)很簡單,主要看document.addEventListener("mouseup", this.mock); 和 mouseDown方法。
到此這篇關(guān)于Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動連線和點(diǎn)擊連線)的文章就介紹到這了,更多相關(guān)Vue jsPlumb連線效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換)
這篇文章主要介紹了關(guān)于VanCascader默認(rèn)值(地址code轉(zhuǎn)換),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07更強(qiáng)大的vue ssr實(shí)現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強(qiáng)大的 vue ssr 預(yù)取數(shù)據(jù)的方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解
這篇文章主要介紹了Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07解決mpvue + vuex 開發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用問題
這篇文章主要介紹了解決mpvue + vuex 開發(fā)微信小程序 vuex輔助函數(shù)mapState、mapGetters不可用問題,需要的朋友可以參考下2018-08-08