当前位置：首页 > 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 拖拽组件，使用起来更加简便。

vue 实现拖拽

安装 vuedraggable：

npm install vuedraggable

在 Vue 组件中使用：

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);
    });
  }
});

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

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

注意事项

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

标签: 拖拽 vue

分享给朋友：

vue实现fadein

Vue 实现 FadeIn 效果在 Vue 中实现淡入（FadeIn）效果可以通过 CSS 过渡、动画或第三方库实现。以下是几种常见方法：使用 CSS 过渡通过 Vue 的过渡系统结合 CSS…

vue实现动画

Vue 实现动画的方法 Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue实现分栏

Vue实现分栏的常见方法使用CSS Flexbox布局通过Flexbox可以快速实现分栏效果，适合大多数响应式布局场景 <template> <div class="con…

vue实现追加

追加数据到数组或列表在Vue中追加数据到数组或列表，可以通过push方法或concat方法实现。以下是几种常见的实现方式：方法一：使用push方法 this.items.push(newIte…

vue实现权限

Vue 实现权限管理的方法在 Vue 项目中实现权限管理通常涉及路由控制、按钮权限和接口权限。以下是几种常见的实现方式：路由权限控制通过动态路由的方式，根据用户权限加载不同的路由配置。可以使用…

vue实现力导向

Vue 实现力导向图在 Vue 中实现力导向图（Force-Directed Graph）通常需要借助第三方库，如 D3.js 或 vis.js。以下是两种常见的实现方式：使用 D3.js 实现…

vue 实现拖拽