关于前端:vue使用jsPlumb实现连续题支持滑动连线和点击连线

前言

最近在做一个互动题板治理我的项目,次要负责开发互动题板的连线题,因为工夫紧凑,一番search之后决定应用jsPlumb来做,自身jsPlumb做的是能够滑动连线的,奈何产品要同时兼容点击,我想做过拖拽的前端小伙伴晓得,拖拽和点击两者是有抵触问题; 拖拽比点击多了个move的操作,所有咱们能够通过鼠标按下和抬起的地位来辨别是否点击或者是拖拽,

思路:① 记录鼠标按下mousedown和鼠标抬起mouseup的时候以后的pageX和pageY,② 通过开方将两个地位坐标进行比照,当值等于0或者小于10的时候证实以后是点击事件,反之则是拖拽事件

实现

下载依赖:
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 创立jsPlumb实例
        _this.init();
        // 设置能够为连线终点和连线起点的元素
        _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);
      // 模仿点击
      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>

实现其实很简略,次要看document.addEventListener(“mouseup”, this.mock); 和 mouseDown办法。

学无止境~

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据