vue使用插件实现拖拽

Vue 拖拽插件实现方法

使用 vue-draggable-next

安装依赖：

npm install vuedraggable@next

基本用法示例：

<template>
  <draggable 
    v-model="list" 
    item-key="id"
    @end="onDragEnd">
    <template #item="{element}">
      <div>{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script>
import { defineComponent } from 'vue'
import draggable from 'vuedraggable'

export default defineComponent({
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成')
    }
  }
})
</script>

使用 Sortable.js 直接集成

安装核心库：

npm install sortablejs

组件封装示例：

<template>
  <div ref="container">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import Sortable from 'sortablejs'

export default {
  setup() {
    const container = ref(null)
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' }
    ])

    onMounted(() => {
      new Sortable(container.value, {
        animation: 150,
        onEnd: (evt) => {
          const movedItem = items.value.splice(evt.oldIndex, 1)[0]
          items.value.splice(evt.newIndex, 0, movedItem)
        }
      })
    })

    return { container, items }
  }
}
</script>

使用 Vue.Draggable 高级功能

跨列表拖拽实现：

<template>
  <div class="container">
    <draggable 
      v-model="listA"
      group="shared"
      item-key="id">
      <template #item="{element}">
        <div class="item">{{ element.name }}</div>
      </template>
    </draggable>

    <draggable 
      v-model="listB"
      group="shared"
      item-key="id">
      <template #item="{element}">
        <div class="item">{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>

自定义拖拽手柄

添加 handle 属性实现指定区域拖拽：

<template>
  <draggable v-model="items" handle=".handle">
    <template #item="{element}">
      <div>
        <span class="handle">≡</span>
        {{ element.name }}
      </div>
    </template>
  </draggable>
</template>

表格行拖拽实现

表格行拖拽示例：

<template>
  <draggable 
    v-model="tableData"
    tag="tbody"
    item-key="id">
    <template #item="{element}">
      <tr>
        <td>{{ element.id }}</td>
        <td>{{ element.name }}</td>
      </tr>
    </template>
  </draggable>
</template>

拖拽状态样式控制

添加拖拽过程样式：

<template>
  <draggable 
    v-model="items" 
    :class="{'dragging': drag}"
    @start="drag = true"
    @end="drag = false">
    <!-- 内容 -->
  </draggable>
</template>

<style>
.dragging {
  background-color: #f0f0f0;
}
</style>

拖拽边界限制

限制只能在特定容器内拖拽：

<template>
  <div class="drop-zone">
    <draggable 
      v-model="items"
      :group="{ name: 'items', pull: 'clone', put: false }">
      <!-- 内容 -->
    </draggable>
  </div>
</template>