Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動(dòng)連線和點(diǎn)擊連線)

更新時(shí)間：2023年01月31日 10:03:35 作者：Erin

jsPlumb 是一個(gè)比較強(qiáng)大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實(shí)現(xiàn)連線效果，同時(shí)支持滑動(dòng)連線和點(diǎn)擊連線，感興趣的可以了解一下

前言

最近在做一個(gè)互動(dòng)題板管理項(xiàng)目，主要負(fù)責(zé)開發(fā)互動(dòng)題板的連線題，由于時(shí)間緊湊，一番search之后決定使用jsPlumb來做，本身jsPlumb做的是可以滑動(dòng)連線的，奈何產(chǎn)品要同時(shí)兼容點(diǎn)擊，我想做過拖拽的前端小伙伴知道，拖拽和點(diǎn)擊兩者是有沖突問題; 拖拽比點(diǎn)擊多了個(gè)move的操作，所有我們可以通過鼠標(biāo)按下和抬起的位置來區(qū)分是否點(diǎn)擊或者是拖拽，

思路：

① 記錄鼠標(biāo)按下mousedown和鼠標(biāo)抬起mouseup的時(shí)候當(dāng)前的pageX和pageY,

② 通過開方將兩個(gè)位置坐標(biāo)進(jìn)行對(duì)比，當(dāng)值等于0或者小于10的時(shí)候證明當(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)連線效果(支持滑動(dòng)連線和點(diǎn)擊連線)的文章就介紹到這了,更多相關(guān)Vue jsPlumb連線效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: