当前位置：首页 > VUE

vue实现区域自由拖拽

2026-02-21 01:16:43VUE

Vue 实现区域自由拖拽

使用原生 HTML5 拖放 API

在 Vue 中可以通过 HTML5 的拖放 API 实现自由拖拽。主要利用 draggable 属性以及相关事件（dragstart、dragend、dragover、drop）。

<template>
  <div 
    class="draggable-item" 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽元素
  </div>
  <div 
    class="drop-zone" 
    @dragover.prevent
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    },
    handleDrop(e) {
      const id = e.dataTransfer.getData('text/plain');
      const draggableElement = document.getElementById(id);
      e.target.appendChild(draggableElement);
    },
    handleDragEnd() {
      // 拖拽结束后的逻辑
    }
  }
};
</script>

使用第三方库 `vuedraggable`

vuedraggable 是基于 Sortable.js 的 Vue 拖拽组件库，适合实现列表或区域的自由拖拽。

安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="list" 
    group="items" 
    @start="dragStart" 
    @end="dragEnd"
  >
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    dragStart() {
      console.log('拖拽开始');
    },
    dragEnd() {
      console.log('拖拽结束');
    }
  }
};
</script>

自定义拖拽逻辑

如果需要更灵活的拖拽效果，可以通过监听鼠标事件（mousedown、mousemove、mouseup）实现。

<template>
  <div 
    ref="draggableElement" 
    class="draggable-item"
    @mousedown="startDrag"
  >
    自定义拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    startDrag(e) {
      const element = this.$refs.draggableElement;
      let posX = e.clientX - element.getBoundingClientRect().left;
      let posY = e.clientY - element.getBoundingClientRect().top;

      const moveHandler = (e) => {
        element.style.left = `${e.clientX - posX}px`;
        element.style.top = `${e.clientY - posY}px`;
      };

      const upHandler = () => {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
      };

      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
    }
  }
};
</script>

<style>
.draggable-item {
  position: absolute;
  cursor: grab;
}
</style>

结合 Vuex 管理拖拽状态

如果拖拽涉及跨组件数据同步，可以使用 Vuex 管理拖拽状态。

// store.js
export default new Vuex.Store({
  state: {
    draggedItem: null,
    dropZoneItems: []
  },
  mutations: {
    setDraggedItem(state, item) {
      state.draggedItem = item;
    },
    addToDropZone(state, item) {
      state.dropZoneItems.push(item);
    }
  }
});

在组件中调用：

methods: {
  handleDragStart(item) {
    this.$store.commit('setDraggedItem', item);
  },
  handleDrop() {
    const item = this.$store.state.draggedItem;
    this.$store.commit('addToDropZone', item);
  }
}