当前位置：首页 > VUE

vue 实现拖拽

2026-03-07 00:40:52VUE

Vue 实现拖拽功能

Vue 中实现拖拽功能可以通过原生 HTML5 的 Drag and Drop API 或第三方库如 vuedraggable 来实现。以下是两种方法的详细说明。

使用 HTML5 Drag and Drop API

HTML5 提供了原生的拖放 API，可以通过 Vue 的事件绑定来实现。

<template>
  <div>
    <div 
      draggable="true" 
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽元素
    </div>
    <div 
      @dragover="handleDragOver"
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      const draggedElement = document.getElementById(data);
      e.target.appendChild(draggedElement);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
};
</script>

使用 vuedraggable 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽组件，使用起来更加简便。

安装 vuedraggable：

npm install vuedraggable

在 Vue 组件中使用：

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

<script>
import draggable from 'vuedraggable';

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

自定义拖拽指令

如果需要更灵活的拖拽功能，可以自定义 Vue 指令。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true);
    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text', binding.value);
    });
  }
});

Vue.directive('drop', {
  bind(el, binding) {
    el.addEventListener('dragover', (e) => {
      e.preventDefault();
    });
    el.addEventListener('drop', (e) => {
      e.preventDefault();
      const data = e.dataTransfer.getData('text');
      binding.value(data);
    });
  }
});

在模板中使用自定义指令：

vue 实现拖拽

<div v-drag="'drag-data'">拖拽元素</div>
<div v-drop="handleDrop">放置区域</div>

注意事项

使用原生 API 时，需要确保 dragover 事件调用 preventDefault 以允许放置。
vuedraggable 适用于列表排序，支持动画和跨列表拖拽。
自定义指令适合需要高度定制化的场景，但实现复杂度较高。

标签: 拖拽 vue

分享给朋友：

vue实现文章锚点定位

实现文章锚点定位的方法在Vue中实现文章锚点定位可以通过多种方式完成，以下是几种常见的方法：使用原生HTML锚点通过HTML的id属性和<a>标签的href属性实现锚点跳转。在Vu…

vue能实现

Vue.js 是一个流行的前端框架，能够实现多种功能。以下是 Vue 能够实现的主要功能和特性：响应式数据绑定 Vue 的核心特性之一是响应式数据绑定。通过数据驱动视图，当数据发生变化时，视图会自…

vue实现购票

Vue 实现购票功能数据结构设计购票功能通常需要以下数据结构：场次信息（时间、地点、价格）座位信息（可选座位、已售座位）用户订单信息示例数据结构： data() { return…

vue 实现轮播

Vue 实现轮播的方法使用第三方库（如 Swiper）安装 Swiper 库： npm install swiper 在 Vue 组件中引入 Swiper： <template&…

vue jwt实现

Vue JWT 实现方法安装依赖确保项目中安装了 jsonwebtoken（后端）和 axios（前端）。若使用 Vue 3，可搭配 vue-router 和 pinia（或 vuex）管理状态。…

vue实现select

Vue 实现 Select 组件的方法在 Vue 中实现 Select 组件可以通过多种方式完成，以下是几种常见的方法：使用原生 HTML select 元素原生 HTML 的 <sel…

vue 实现拖拽