当前位置：首页 > VUE

vue实现拖拽的插件

2026-02-23 08:36:42VUE

vue-draggable

vue-draggable 是基于 Sortable.js 封装的 Vue 组件，支持 Vue 2 和 Vue 3，适用于列表拖拽排序场景。

安装：

npm install vuedraggable

基础用法（Vue 2）：

<template>
  <draggable v-model="list" @end="onDragEnd">
    <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' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

vue-drag-resize

适用于需要自由拖拽和调整大小的元素，如图片、窗口等组件。

安装：

vue实现拖拽的插件

npm install vue-drag-resize

基础用法：

<template>
  <vue-drag-resize 
    :w="200" 
    :h="200"
    @dragging="onDrag"
    @resizing="onResize">
    <p>可拖拽调整的组件</p>
  </vue-drag-resize>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
export default {
  components: { VueDragResize },
  methods: {
    onDrag(newRect) {
      console.log('新位置:', newRect)
    },
    onResize(newRect) {
      console.log('新尺寸:', newRect)
    }
  }
}
</script>

interact.js

interact.js 是功能强大的纯 JavaScript 拖拽库，可与 Vue 结合使用，适合需要高度自定义的场景。

安装：

vue实现拖拽的插件

npm install interactjs

基础实现：

<template>
  <div ref="draggable" class="draggable-box">
    可拖拽元素
  </div>
</template>

<script>
import interact from 'interactjs'
export default {
  mounted() {
    interact(this.$refs.draggable)
      .draggable({
        onmove: event => {
          const target = event.target
          const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
          const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

          target.style.transform = `translate(${x}px, ${y}px)`
          target.setAttribute('data-x', x)
          target.setAttribute('data-y', y)
        }
      })
  }
}
</script>

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

原生 HTML5 拖拽 API

Vue 可以直接使用 HTML5 原生拖拽 API，适合简单场景。

实现示例：

<template>
  <div 
    draggable="true"
    @dragstart="dragStart"
    @dragend="dragEnd">
    拖拽我
  </div>

  <div 
    @dragover.prevent
    @dragenter.prevent
    @drop="drop">
    放置区域
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(e) {
      e.dataTransfer.setData('text/plain', '自定义数据')
    },
    drop(e) {
      const data = e.dataTransfer.getData('text/plain')
      console.log('接收到的数据:', data)
    }
  }
}
</script>