拖曳 排序元件 - daniel-qa/Vue GitHub Wiki

<draggable class="list-group" tag="div" v-model="volumeList" v-bind="dragOptions" @start="drag = true" @end="onDragEnd">

  <div v-for="(volume,volumeIndex) in volumeList" :key="volume.id" 
        :class="['volume-item',activeVolumeIndex === volumeIndex ? 'volume-active' : '', { 'is-share-item': inShareView }]"       
        @click="onVolumeClick(volume,volumeIndex)">

</draggable>
  • 拖曳選項範例 (dragOptions)
dragOptions: {
  animation: 150,    // 拖曳動畫時間(ms)
  handle: '.handle', // 只允許抓 handle 拖
  group: 'volumes',  // 可跨列表拖放
  ghostClass: 'drag-ghost' // 拖曳時的占位樣式
}

v-bind="dragOptions"

等同於：

:animation="dragOptions.animation"
:handle="dragOptions.handle"
:group="dragOptions.group"
...

把物件裡的所有 key-value 都「解開」成 draggable 的 props / Sortable.js 選項。

https://github.com/SortableJS/Vue.Draggable?tab=readme-ov-file

https://david-desmaisons.github.io/draggable-example/

設是抓裡面最外層第一個元件(如果沒有設定 handle)

<template>
  <div>
    <h2>簡單拖曳範例</h2>
    <draggable v-model="items" :options="{ animation: 150 }">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: '第一項' },
        { id: 2, name: '第二項' },
        { id: 3, name: '第三項' },
        { id: 4, name: '第四項' }
      ]
    }
  }
}
</script>

<style>
.item {
  padding: 10px;
  margin-bottom: 5px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: grab;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️