Vue と Canvas を使用してドラッグ可能な要素コンポーネント ライブラリを開発する方法

vue create drag-and-drop-components

<template>
  <div
    :style="{
      position: 'absolute',
      left: positionX + 'px',
      top: positionY + 'px',
      width: width + 'px',
      height: height + 'px',
      background: 'blue'
    }"
    @mousedown="startDrag"
    @mousemove="drag"
    @mouseup="stopDrag"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      positionX: 0,
      positionY: 0,
      startX: 0,
      startY: 0
    }
  },
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    }
  },
  methods: {
    startDrag(event) {
      event.preventDefault();
      this.isDragging = true;
      this.startX = event.clientX - this.positionX;
      this.startY = event.clientY - this.positionY;
    },
    drag(event) {
      if (this.isDragging) {
        this.positionX = event.clientX - this.startX;
        this.positionY = event.clientY - this.startY;
      }
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
}
</script>

<style scoped>
div {
  cursor: move;
}
</style>

<template>
  <div id="app">
    <draggable-element width="200" height="200">
      <h2>Hello, draggable element!</h2>
    </draggable-element>
  </div>
</template>

<script>
import DraggableElement from './components/DraggableElement.vue';

export default {
  components: {
    DraggableElement
  }
}
</script>

<style>
#app {
  text-align: center;
}
</style>

npm run serve