当前位置：首页 > 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 中实现搜索功能通常涉及数据绑定、事件监听和过滤逻辑。以下是几种常见的实现方式：使用计算属性过滤列表 <template> <div>…

vue实现评论编辑

Vue 实现评论编辑功能数据绑定与表单结构使用 v-model 双向绑定评论内容到表单输入框，确保编辑时能显示原内容并同步修改。示例模板结构： <template> <di…

vue实现选择分类

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

vue实现自动翻译

Vue 实现自动翻译的方法在 Vue 项目中实现自动翻译功能可以通过多种方式完成，以下是几种常见的方法：使用第三方翻译 API 注册并获取翻译 API 的密钥（如 Google Transla…

vue实现tab换行

Vue实现Tab切换的常见方法使用Vue实现Tab切换功能可以通过多种方式完成，以下是几种常见的方法：动态组件结合v-if或v-show 通过v-if或v-show控制不同Tab内容的显示与隐…

vue点击实现排序

实现点击排序的方法在Vue中实现点击排序功能，可以通过以下几种方式完成：使用计算属性结合排序方法定义一个响应式数据存储排序状态，通过计算属性动态返回排序后的数组。点击事件切换排序状态。…

vue实现拖拽div