当前位置：首页 > VUE

vue实现可拖动插件

2026-01-22 20:19:19VUE

Vue 实现可拖动功能的方法

使用原生 HTML5 拖放 API

HTML5 提供了原生的拖放 API，可以通过 draggable 属性结合事件监听实现拖动功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    可拖动元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
    },
    handleDragEnd(e) {
      // 拖动结束处理
    }
  }
}
</script>

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 组件，适合列表排序和拖动场景。

安装依赖：

npm install vuedraggable

使用示例：

<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.directive('drag', {
  bind(el, binding) {
    let isDragging = false
    let initialX = 0
    let initialY = 0

    el.style.position = 'absolute'

    el.addEventListener('mousedown', (e) => {
      isDragging = true
      initialX = e.clientX - el.getBoundingClientRect().left
      initialY = e.clientY - el.getBoundingClientRect().top
    })

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return
      el.style.left = `${e.clientX - initialX}px`
      el.style.top = `${e.clientY - initialY}px`
    })

    document.addEventListener('mouseup', () => {
      isDragging = false
    })
  }
})

使用指令：

<template>
  <div v-drag style="width: 100px; height: 100px; background: red">
    可拖动元素
  </div>
</template>

使用 interact.js 实现复杂拖动

interact.js 是功能强大的拖动库，支持多种手势和交互。

安装依赖：

npm install interactjs

使用示例：

<template>
  <div ref="draggable" class="draggable">
    可拖动元素
  </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>