当前位置：首页 > VUE

vue如何实现拖动

2026-01-08 04:13:11VUE

Vue 实现拖动的几种方法

使用 HTML5 原生拖放 API

HTML5 提供了原生的拖放 API，通过 draggable 属性和相关事件实现拖动功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    可拖动的元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
    },
    handleDragEnd(event) {
      // 拖动结束后的处理
    }
  }
}
</script>

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 组件，适合列表排序和拖动场景。

vue如何实现拖动

安装：

npm install vuedraggable

使用示例：

vue如何实现拖动

<template>
  <draggable v-model="list" @end="onDragEnd">
    <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: {
    onDragEnd() {
      // 拖动结束后的处理
    }
  }
}
</script>

使用自定义拖动逻辑

通过鼠标事件实现自定义拖动效果，适合需要精细控制拖动行为的场景。

<template>
  <div 
    ref="draggableElement"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    :style="elementStyle"
  >
    自定义拖动元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      elementStyle: {
        position: 'absolute',
        left: '0px',
        top: '0px'
      }
    }
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
    },
    onDrag(event) {
      if (!this.isDragging) return;
      const dx = event.clientX - this.startX;
      const dy = event.clientY - this.startY;
      this.elementStyle.left = `${this.currentX + dx}px`;
      this.elementStyle.top = `${this.currentY + dy}px`;
    },
    stopDrag() {
      if (!this.isDragging) return;
      this.isDragging = false;
      this.currentX = parseInt(this.elementStyle.left);
      this.currentY = parseInt(this.elementStyle.top);
    }
  }
}
</script>

使用 Vue 指令实现拖动

通过自定义指令封装拖动逻辑，提高代码复用性。

<template>
  <div v-draggable class="draggable-box">
    通过指令拖动的元素
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el) {
        let posX = 0, posY = 0, startX = 0, startY = 0;
        el.style.position = 'absolute';

        el.addEventListener('mousedown', (e) => {
          startX = e.clientX - posX;
          startY = e.clientY - posY;
          document.addEventListener('mousemove', moveElement);
          document.addEventListener('mouseup', stopDrag);
        });

        function moveElement(e) {
          posX = e.clientX - startX;
          posY = e.clientY - startY;
          el.style.left = posX + 'px';
          el.style.top = posY + 'px';
        }

        function stopDrag() {
          document.removeEventListener('mousemove', moveElement);
          document.removeEventListener('mouseup', stopDrag);
        }
      }
    }
  }
}
</script>