当前位置：首页 > 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 实现选择分类的方法使用 v-model 绑定选择值在 Vue 中可以通过 v-model 指令实现双向数据绑定，适用于下拉选择框（<select>）。以下是一个基本示例： &…

vue实现访问量

Vue 实现访问量统计的方法使用前端计数在 Vue 中可以通过简单的计数器实现页面访问量的统计。这种方法适合小型项目或演示用途。 // 在 Vue 组件中 data() { return {…

vue弹幕实现不重叠

实现 Vue 弹幕不重叠的方法 CSS 定位与动画控制通过绝对定位和动态计算弹幕轨道高度，确保弹幕在不同轨道上运行。每条弹幕占据固定高度的轨道，避免重叠。 // 弹幕轨道高度计算 const t…

vue实现下拉层级

Vue实现下拉层级菜单使用Vue实现下拉层级菜单可以通过递归组件或动态渲染的方式完成。以下是两种常见实现方法：递归组件实现创建一个递归组件处理多级菜单结构： <template>…

vue公共列表的实现

实现 Vue 公共列表组件公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：基础实现创建可复用的列表组件 List.vue： <tem…

vue前端分页怎么实现

前端分页实现方法在Vue中实现前端分页通常涉及数据分割和页面控制逻辑。以下是常见的实现方式：使用计算属性分页通过计算属性对数据进行切片处理： computed: { paginate…

vue实现拖拽div