Vue3 使用 Vue.Draggable 套件快速製作可拖拉清單

上一篇 Vue2 使用 Vue.Draggable 套件快速製作可拖拉清單 是使用 Vue2 (廢話)，本篇因為筆者日更部落格靈感枯竭，加上 Vue3 版本的 draggable 是另一個專案，於是再來寫一篇示範...

安裝

npm

    
npm i -S vuedraggable@next
    

CDN (不建議)

註：下方是官方文件上的 CDN 連結，但似乎是錯誤的， vue 3 在 cloudflare 上沒有 vue/3.0.2/vue.min.js 檔案，並且在 cloudflare 上也沒有 Vue.Draggable/4.0.0 筆者在測試時無法正常使用

    
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>
    

基本範例

    
<template>
  <draggable
      v-model="list"
      group="group1"
      @start="drag=true"
      @end="drag=false"
      item-key="id">
    <template #item="{element}">
      <div>{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

defineComponent({
  components: [
    {'draggable': draggable},
  ]
});

const list = ref(
    [
      {id: 1, name: 'Item 1'},
      {id: 2, name: 'Item 2'},
      {id: 3, name: 'Item 3'},
    ]
)
</script>
    

兩個清單互相拖曳

將兩個 draggable 的 group 設為相同

    
<template>

  <div class="flex">
    <draggable style="margin-right: 10px"
               v-model="list1"
               group="group1"
               @start="drag=true"
               @end="drag=false"
               item-key="id">
      <template #item="{element}">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
    <draggable
        v-model="list2"
        group="group1"
        @start="drag=true"
        @end="drag=false"
        item-key="id">
      <template #item="{element}">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
  </div>

</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

defineComponent({
  components: [
    {'draggable': draggable},
  ]
});

const list1 = ref(
    [
      {id: 1, name: 'Item 1'},
      {id: 2, name: 'Item 2'},
      {id: 3, name: 'Item 3'},
    ]
)
const list2 = ref(
    [
      {id: 4, name: 'Item 4'},
      {id: 5, name: 'Item 5'},
      {id: 6, name: 'Item 6'},
    ]
)

</script>
    

動畫

在 computed 內指定動畫，並使用 v-bind 綁定

    
<template>
    <draggable style="margin-right: 10px"
               v-model="list1"
               v-bind="dragOptions"
               group="group1"
               @start="drag=true"
               @end="drag=false"
               item-key="id">
      <template #item="{element}">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

defineComponent({
  components: [
    {'draggable': draggable},
  ]
});

const list1 = ref(
    [
      {id: 1, name: 'Item 1'},
      {id: 2, name: 'Item 2'},
      {id: 3, name: 'Item 3'},
      {id: 4, name: 'Item 4'},
      {id: 5, name: 'Item 5'},
      {id: 6, name: 'Item 6'},
    ]
)

const dragOptions = computed(() => {
  return {
    animation: 200,
    group: "description",
    disabled: false,
    ghostClass: "ghost"
  };
})

</script>
    

參考資料：
Github - SortableJS/vue.draggable.next