如何使用 Vue 实现画布图形的拖放功能？

要在画布上的任何节点启用拖放功能，只需将 draggable: true 属性传递给组件即可。

当你拖放一个图形时，建议将其位置保存到你的应用存储中。你可以使用 dragstart 和 dragend 事件来实现这一目的。

说明：尝试拖动文本。注意它在被拖动时颜色的变化。

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-text
        @dragstart="handleDragStart"
        @dragend="handleDragEnd"
        :config="{
          text: '可拖动文本',
          x: 50,
          y: 50,
          draggable: true,
          fill: isDragging ? 'green' : 'black'
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      isDragging: false
    };
  },
  methods: {
    handleDragStart() {
      this.isDragging = true;
    },
    handleDragEnd() {
      this.isDragging = false;
    }
  }
};
</script>

Open Sandbox