vue可拖动组件

组件代码

<template>
  <div
    class="draggable"
    :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
    @mousedown="startDrag"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      dragging: false,
      offset: { x: 0, y: 0 }
    };
  },
  methods: {
    startDrag(event) {
      this.dragging = true;
      this.offset = {
        x: event.clientX - this.position.x,
        y: event.clientY - this.position.y
      };
      document.addEventListener('mousemove', this.doDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    doDrag(event) {
      if (this.dragging) {
        this.position.x = event.clientX - this.offset.x;
        this.position.y = event.clientY - this.offset.y;
      }
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.doDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style>
.draggable {
  cursor: grab;
  user-select: none; /* Prevent text selection */
}
</style>

　　

如何使用

 

import DraggableComponent from './DraggableComponent .vue';