<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 Draggable</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.uv.cc/vue/3.5.13/vue.global.js"></script>
<script src="https://cdn.uv.cc/Sortable/1.15.2/Sortable.min.js"></script>
<script src="https://cdn.uv.cc//vuedraggable/4.1.4/vuedraggable.umd.min.js"></script>
<script>
const { createApp, ref } = Vue;
const { vuedraggable } = window;
const App = {
components: {
vuedraggable
},
setup() {
const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
return {
items
};
},
template: `
<div>
<vuedraggable v-model="items" :list="items" item-key="id">
<template #item="{ element }">
<div>{{ element }}</div>
</template>
</vuedraggable>
</div>
`
};
createApp(App).mount('#app');
</script>
</body>
</html>
Vue 3 vuedraggable 例子
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}