当前位置：首页 > VUE

vue实现visio拖拽功能

2026-02-24 21:56:54VUE

Vue实现Visio拖拽功能

在Vue中实现类似Visio的拖拽功能，可以通过以下方法实现。Visio的核心功能包括节点拖拽、连线、缩放等，以下重点介绍拖拽和连线的实现方式。

使用第三方库

推荐使用go.js或jointjs等专业图形库，它们内置了拖拽、连线等功能，适合复杂场景。

安装go.js：

npm install gojs

基础示例代码：

vue实现visio拖拽功能

<template>
  <div id="diagram" ref="diagram"></div>
</template>

<script>
import * as go from 'gojs';

export default {
  mounted() {
    const $ = go.GraphObject.make;
    const diagram = $(go.Diagram, this.$refs.diagram, {
      'undoManager.isEnabled': true,
      'clickCreatingTool.archetypeNodeData': { text: 'New Node' }
    });

    diagram.nodeTemplate = $(
      go.Node,
      'Auto',
      $(go.Shape, 'RoundedRectangle', { fill: 'lightblue' }),
      $(go.TextBlock, { margin: 5 }, new go.Binding('text', 'text'))
    );

    diagram.model = new go.GraphLinksModel([
      { key: 1, text: 'Node 1' },
      { key: 2, text: 'Node 2' }
    ], [
      { from: 1, to: 2 }
    ]);
  }
};
</script>

自定义拖拽实现

如果项目较简单，可以使用原生HTML5拖拽API或vuedraggable库。

安装vuedraggable：

npm install vuedraggable

示例代码：

vue实现visio拖拽功能

<template>
  <div>
    <draggable v-model="nodes" @end="onDragEnd">
      <div v-for="node in nodes" :key="node.id" class="node">
        {{ node.text }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      nodes: [
        { id: 1, text: 'Node 1', x: 50, y: 50 },
        { id: 2, text: 'Node 2', x: 150, y: 150 }
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      console.log('拖拽结束', event);
    }
  }
};
</script>

<style>
.node {
  width: 100px;
  height: 50px;
  background: lightblue;
  margin: 10px;
  cursor: move;
}
</style>

连线功能实现

对于连线功能，可以使用leader-line库实现简单的连线效果。

安装leader-line：

npm install leader-line

示例代码：

<template>
  <div>
    <div ref="node1" class="node">Node 1</div>
    <div ref="node2" class="node">Node 2</div>
  </div>
</template>

<script>
import LeaderLine from 'leader-line';

export default {
  mounted() {
    new LeaderLine(
      this.$refs.node1,
      this.$refs.node2,
      { color: 'blue', size: 2 }
    );
  }
};
</script>