当前位置：首页 > 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 指令实现自由拖拽

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

<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
适用于列表排序场景：

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实现拖拽div

标签: 拖拽 vue

分享给朋友：

vue实现查询替换

Vue 实现查询替换功能在 Vue 中实现查询替换功能，可以通过数据绑定和字符串操作方法结合实现。以下是具体实现方式：基础实现 <template> <div>…

vue实现钟表

使用 Vue 实现动态钟表以下是一个基于 Vue 3 的动态钟表实现方案，包含时分秒指针和数字时间显示。模板部分 <template> <div class="clock-…

vue功能实现

Vue 功能实现指南 Vue.js 是一个渐进式 JavaScript 框架，广泛用于构建用户界面。以下是 Vue 功能的常见实现方法。数据绑定 Vue 的核心功能之一是数据绑定，通过 v-mo…

vue实现全屏

Vue 实现全屏功能的方法在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：使用原生 Fullscreen API 通过调用 do…

vue实现vnc

Vue 实现 VNC 客户端在 Vue 项目中实现 VNC 客户端功能，可以通过集成现有的 VNC 客户端库或组件完成。以下是具体实现方法：安装依赖库使用 noVNC 或其他 VNC 客户端…

vue实现前端

Vue 实现前端的核心方法与步骤安装 Vue 项目使用 Vue CLI 或 Vite 创建项目。Vue CLI 是传统构建工具，Vite 是新一代轻量级工具。 npm init vue@la…

vue实现拖拽div