vuedraggable - daniel-qa/Vue GitHub Wiki

拖曳排序套件

  • Vue 2 使用方式
<template>
  <draggable
    v-model="fileList"
    :options="{ animation: 150 }"
    @end="onDragFilesEnd"
  >
    <div v-for="file in fileList" :key="file.id" class="file-item">
      {{ file.name }}
    </div>
  </draggable>
</template>

import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      fileList: [
        { id: 1, name: 'report.pdf' },
        { id: 2, name: 'photo.png' },
        { id: 3, name: 'notes.txt' }
      ]
    }
  },
  methods: {
    onDragFilesEnd(evt) {
      console.log('拖曳結束', evt)
    }
  }
}

v-model="fileList" 綁定資料陣列，自動同步順序

item-key="id" 指定唯一 key（必要）

@end="onDragFilesEnd" 拖曳結束事件（可以儲存順序）

#item slot 自訂每個項目的渲染方式

⚠️ **GitHub.com Fallback** ⚠️