vue2使用jsplumb 实现绘制流程图并可进行连线箭头功能和拖拽功能-DPDK中文网

使用 Vue 2 和 jsPlumb 实现绘制流程图并具备连线箭头和拖拽功能，可以按照以下步骤进行：

1. 安装 jsPlumb

首先，确保你已经在项目中安装了 jsPlumb。如果还没有安装，可以通过 npm 或直接引入 CDN。

npm install jsplumb --save

或者在 HTML 文件中直接引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.15.6/jsplumb.min.js"></script>

2. 创建基本的 Vue 组件

在你的 Vue 项目中创建一个组件，比如 FlowChart.vue：

<template>
  <div id="flowchart" ref="flowchart" class="flowchart">
    <div 
      v-for="(node, index) in nodes" 
      :key="index"
      class="node"
      :style="{ left: node.x + 'px', top: node.y + 'px' }"
      @mousedown="startDrag(node)"
    >
      {{ node.label }}
      <div class="port" @click.stop.prevent="addConnection(index)"></div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb";

export default {
  data() {
    return {
      nodes: [
        { label: "Node 1", x: 100, y: 100 },
        { label: "Node 2", x: 300, y: 100 }
      ],
      isDragging: false,
      currentDraggedNode: null,
    };
  },
  
  mounted() {
    this.initJsPlumb();
    this.makeDraggable();
  },

  methods: {
    initJsPlumb() {
      jsPlumb.ready(() => {
        this.instance = jsPlumb.getInstance({
          Container: "flowchart",
        });

        // 添加连接线的样式
        this.instance.bind("connection", (conn) => {
          conn.getOverlay("label").setLabel("Connection");
        });
        
        // 初始化节点连接
        this.nodes.forEach((node, index) => {
          this.instance.addEndpoint(`node_${index}`, { anchor:"Continuous" }, { uuid:`port_${index}` });
        });
      });
    },
    
    makeDraggable() {
      const nodes = document.querySelectorAll('.node');
      
      nodes.forEach(node => {
        node.draggable = true;
        
        node.addEventListener('dragstart', (e) => {
          e.dataTransfer.setData('text/plain', e.target.id);
          this.isDragging = true;
          this.currentDraggedNode = e.target;
        });

        node.addEventListener('dragend', () => {
          this.isDragging = false;
          this.currentDraggedNode = null;
        });

        node.addEventListener('dragover', (e) => e.preventDefault());
        
        node.addEventListener('drop', (e) => {
          if (this.isDragging && this.currentDraggedNode) {
            const draggedIndex = parseInt(this.currentDraggedNode.dataset.index);
            const targetIndex = parseInt(e.target.dataset.index);
            
            // Update positions or logic for dropping can go here
            
            console.log(`Dropped ${draggedIndex} on ${targetIndex}`);
          }
          
          e.preventDefault();
        });
        
      });
    },

    addConnection(nodeIndex) {
       const endpointUUID = `port_${nodeIndex}`;
       const connectionSourceId = prompt("Enter source node ID:");
       
       if(connectionSourceId){
         this.instance.connect({
           source:endpointUUID,
           target:`port_${connectionSourceId}`,
           overlays:[["Arrow", { width:10, length:10, location:1 }]]
         });
       }
   }
   
}
</script>

<style scoped>
.flowchart {
   position: relative;
   width: 600px;
   height: 400px;
   border: solid 1px #ccc;
}

.node{
   position:absolute; 
   padding :10px; 
   border :solid black .5px; 
   background-color:white; 
   cursor:pointer; 
}

.port{
   width :10px; 
   height :10px; 
   background-color:red; 
}
</style>

3. 使用组件

在你的主应用或其他组件中使用这个新的 FlowChart:

<template>
  <div id="app">
     <FlowChart />
  </div>
</template>

<script>
import FlowChart from './components/FlowChart.vue'

export default {
 components:{
     FlowChart,
 }
}
</script>