上一篇 Vue2 使用 Vue.Draggable 套件快速製作可拖拉清單 是使用 Vue2 (廢話),本篇因為筆者日更部落格靈感枯竭,加上 Vue3 版本的 draggable 是另一個專案,於是再來寫一篇示範...
參考資料:
Github - SortableJS/vue.draggable.next
安裝
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
留言
張貼留言
如果有任何問題或建議,都歡迎留言或來信: a@ruyut.com