基于Vue实现拖拽效果

使用HTML5原生拖拽API

Vue可以结合HTML5的原生拖拽API实现基础拖拽功能。通过draggable属性标记可拖拽元素，监听dragstart、dragend等事件实现交互逻辑。

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

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '自定义数据')
    },
    handleDragEnd() {
      console.log('拖拽结束')
    }
  }
}
</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('排序后的数组:', this.list)
    }
  }
}
</script>

自定义拖拽指令

通过Vue自定义指令实现更灵活的拖拽控制。注册全局指令后可在任意元素上使用v-drag指令。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true)
    el.style.cursor = 'grab'

    el.addEventListener('dragstart', e => {
      e.dataTransfer.setData('text', binding.value)
      el.style.opacity = '0.5'
    })

    el.addEventListener('dragend', () => {
      el.style.opacity = '1'
    })
  }
})

实现拖拽边界限制

通过计算元素位置实现拖拽区域限制。结合getBoundingClientRect获取元素坐标，在drag事件中动态校验边界。

methods: {
  handleDrag(e) {
    const rect = this.$el.getBoundingClientRect()
    const maxX = window.innerWidth - rect.width
    const maxY = window.innerHeight - rect.height

    this.posX = Math.min(maxX, Math.max(0, e.clientX))
    this.posY = Math.min(maxY, Math.max(0, e.clientY))
  }
}

拖拽状态样式处理

通过动态class和style绑定实现拖拽过程中的视觉效果变化。使用:class和:style响应拖拽状态变化。

<div 
  :class="{ 'dragging': isDragging }"
  :style="{ transform: `translate(${x}px, ${y}px)` }"
></div>

data() {
  return {
    isDragging: false,
    x: 0,
    y: 0
  }
}