vue实现画面控件拖拽

Vue 实现画面控件拖拽

使用 HTML5 原生拖拽 API

HTML5 提供了原生拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件实现拖拽功能。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      draggable="true"
      @dragstart="handleDragStart(index, $event)"
      @dragend="handleDragEnd"
      @dragover.prevent
      @drop="handleDrop(index, $event)"
      class="draggable-item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(index, event) {
      this.draggedIndex = index;
      event.dataTransfer.setData('text/plain', index);
    },
    handleDragEnd() {
      this.draggedIndex = null;
    },
    handleDrop(index, event) {
      const fromIndex = this.draggedIndex;
      const toIndex = index;
      if (fromIndex !== toIndex) {
        const newItems = [...this.items];
        const [removed] = newItems.splice(fromIndex, 1);
        newItems.splice(toIndex, 0, removed);
        this.items = newItems;
      }
    }
  }
};
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

使用第三方库 vuedraggable

vuedraggable 是基于 Sortable.js 的 Vue 拖拽组件，提供了更简单的 API 和更丰富的功能。

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <draggable 
    v-model="items" 
    tag="div" 
    item-key="id"
    @end="onDragEnd"
  >
    <template #item="{ element }">
      <div class="draggable-item">
        {{ element.name }}
      </div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      console.log('拖拽结束', event);
    }
  }
};
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

使用 @vueuse/core 的拖拽功能

@vueuse/core 提供了 useDraggable 方法，可以快速实现元素的拖拽功能。

安装依赖：

npm install @vueuse/core

使用示例：

<template>
  <div ref="target" class="draggable-box">
    Drag me!
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDraggable } from '@vueuse/core';

export default {
  setup() {
    const target = ref(null);
    const { x, y, style } = useDraggable(target, {
      initialValue: { x: 0, y: 0 }
    });

    return { style };
  }
};
</script>

<style>
.draggable-box {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  position: absolute;
}
</style>

自定义拖拽逻辑

如果需要更复杂的拖拽逻辑，可以结合鼠标事件（mousedown、mousemove、mouseup）实现。

<template>
  <div 
    ref="draggableElement"
    class="draggable-element"
    @mousedown="startDrag"
  >
    Drag me!
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0
    };
  },
  mounted() {
    document.addEventListener('mousemove', this.onDrag);
    document.addEventListener('mouseup', this.stopDrag);
  },
  beforeUnmount() {
    document.removeEventListener('mousemove', this.onDrag);
    document.removeEventListener('mouseup', this.stopDrag);
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      const rect = this.$refs.draggableElement.getBoundingClientRect();
      this.offsetX = this.startX - rect.left;
      this.offsetY = this.startY - rect.top;
    },
    onDrag(event) {
      if (!this.isDragging) return;
      const x = event.clientX - this.offsetX;
      const y = event.clientY - this.offsetY;
      this.$refs.draggableElement.style.left = `${x}px`;
      this.$refs.draggableElement.style.top = `${y}px`;
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>

<style>
.draggable-element {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  position: absolute;
}
</style>

以上方法可以根据实际需求选择，原生 API 适合简单场景，vuedraggable 适合列表排序，@vueuse/core 适合快速实现拖拽，自定义逻辑适合复杂交互。