当前位置：首页 > 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 事件支持：

vue实现拖拽div

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

性能优化建议

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

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

标签: 拖拽 vue

分享给朋友：

vue datepicker 实现

实现 Vue Datepicker 的基本方法在 Vue 项目中实现日期选择功能，可以使用第三方库如 vue-datepicker 或 v-calendar。以下是两种常见实现方式：安装 vue…

vue实现ai

Vue 实现 AI 功能 Vue.js 可以通过集成第三方 AI 服务或本地 AI 模型来实现 AI 功能。以下是几种常见的方法：集成第三方 AI API 使用 Vue 调用如 OpenAI、Go…

vue实现muli

Vue 实现多语言（i18n）支持在 Vue 项目中实现多语言（i18n）功能，通常使用 vue-i18n 插件。以下是具体实现步骤：安装 vue-i18n npm install vue-i…

vue实现slider

Vue 实现 Slider 组件使用 Vue 实现 Slider 组件可以通过原生开发或借助第三方库。以下是两种常见方法：原生实现 Slider 创建一个基础的 Slider 组件，通过 v-m…

vue实现通讯

Vue 组件通讯方法父子组件通讯父组件向子组件传递数据通过 props，子组件向父组件传递数据通过 $emit 事件。父组件模板： <child-component :message=…

vue实现翻页

Vue实现翻页功能在Vue中实现翻页功能通常需要结合分页组件和数据请求逻辑。以下是常见的实现方法：使用Element UI分页组件安装Element UI后，可以直接使用其分页组件：…

vue实现拖拽div