在 Vue 專案使用 vue-draggable-plus 套件實現拖放功能

Others
,

建立專案

建立專案。

1
2
npm create vite@latest vue-draggable-plus-example -- --template vue
cd vue-draggable-plus-example

安裝套件。

1
npm install vue-draggable-plus

修改 main.js 檔，全域註冊 VueDraggable 元件。

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { VueDraggable } from 'vue-draggable-plus';

createApp(App)
  .component('VueDraggable', VueDraggable)
  .mount('#app')

修改 App.vue 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script setup>
import { ref } from 'vue';

const items = ref(Array.from({ length: 10 }, (v, i) => ({
  id: i + 1,
  name: `Item ${i + 1}`
})));
</script>

<template>
  <div>
    <div style="display: flex; justify-content: center;">
      <ul>
        <VueDraggable
          v-model="items"
          :animation="250"
          direction="vertical"
          @end="() => console.log('end')"
          @start="() => console.log('start')"
        >
          <li v-for="item in items" :key="item.id">
            {{ item.name }}
          </li>
        </VueDraggable>
      </ul>
    </div>
  </div>
</template>

啟動本地伺服器。

1
npm run dev

前往 http://localhost:5173/ 瀏覽。

程式碼

參考資料