当前位置：首页 > VUE

vue实现拖拽div

2026-01-08 12:56:09VUE

Vue 实现拖拽 Div 的方法

使用原生 HTML5 拖拽 API

HTML5 提供了原生的拖拽 API，结合 Vue 的事件绑定可以快速实现拖拽功能。以下是实现步骤：

<template>
  <div 
    class="draggable" 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽我
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
      e.target.style.opacity = '0.4';
    },
    handleDragEnd(e) {
      e.target.style.opacity = '1';
    }
  }
}
</script>

使用 Vue 指令实现自由拖拽

通过自定义指令实现更灵活的拖拽效果，适用于任意元素：

vue实现拖拽div

<template>
  <div v-draggable class="box"></div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el) {
        el.onmousedown = (e) => {
          const disX = e.clientX - el.offsetLeft;
          const disY = e.clientY - el.offsetTop;
          document.onmousemove = (e) => {
            el.style.left = e.clientX - disX + 'px';
            el.style.top = e.clientY - disY + 'px';
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
}
</script>

<style>
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #42b983;
  cursor: move;
}
</style>

使用第三方库

对于更复杂的拖拽需求，可以使用专门的 Vue 拖拽库：

Vue.Draggable
适用于列表排序场景：

vue实现拖拽div

npm install vuedraggable

<template>
  <draggable v-model="list">
    <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'}] }
  }
}
</script>

Interact.js
提供更精细的拖拽控制：

<template>
  <div ref="dragEl" class="drag-target"></div>
</template>

<script>
import interact from 'interactjs';
export default {
  mounted() {
    interact(this.$refs.dragEl)
      .draggable({ inertia: true })
      .on('dragmove', (event) => {
        const target = event.target;
        target.style.transform = `translate(${event.dx}px, ${event.dy}px)`;
      });
  }
}
</script>

移动端适配

针对触摸设备需要添加 touch 事件支持：

el.addEventListener('touchstart', handleStart);
el.addEventListener('touchmove', handleMove);
el.addEventListener('touchend', handleEnd);

性能优化建议

对于频繁更新的元素，使用 CSS transform 代替 top/left 属性
在拖拽结束时移除事件监听器
复杂场景考虑使用 requestAnimationFrame

以上方法可根据具体需求选择，简单交互推荐原生实现，复杂场景建议使用成熟库。

标签: 拖拽 vue

分享给朋友：

vue实现表格

Vue 实现表格的方法在 Vue 中实现表格可以通过多种方式完成，以下是几种常见的方法：使用原生 HTML 表格 Vue 可以直接渲染原生 HTML 表格，通过 v-for 动态生成表格行和列。…

vue设计与实现目录

以下是《Vue设计与实现》一书的典型目录结构（根据常见技术书籍及Vue核心内容整理）：响应式系统响应式数据的基本原理依赖收集与触发更新实现简易响应式系统 Proxy与Reflec…

vue前端实现下载进度

实现下载进度条的基本思路在Vue中实现下载进度条，通常需要结合XMLHttpRequest或Fetch API来监听下载进度事件。通过计算已下载数据与总数据的比例，动态更新进度条的显示。使用XM…

vue实现triger

在Vue中实现触发器（trigger）功能通常涉及自定义事件或DOM事件触发。以下是几种常见场景的实现方法：自定义事件触发通过$emit方法触发父组件中监听的自定义事件： // 子组件 thi…

实现 vue 框架

Vue 框架的基本实现 Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是实现 Vue 框架的基本步骤和核心概念。核心概念响应式数据绑定 Vue 的核心特性之一是响应式数…

vue实现modal

Vue 实现 Modal 弹窗组件使用 Vue 实现 Modal 弹窗组件可以通过多种方式，包括原生 Vue 组件、第三方库或自定义指令。以下是几种常见方法：原生 Vue 组件实现创建一个基础…

vue实现拖拽div