Vue組件Draggable實現拖拽功能

npm install vuedraggable

import draggable from 'vuedraggable'

<template>
 <div>
 <!-- 調用組件 -->
 <draggable element="ul" v-model="listdata">
 <li v-for="item in listdata">{{item.name}}</li>
 </draggable>
 <!-- 展示list數據效果 -->
 {{listdata}}
 </div>
</template>
 
<script>
import draggable from 'vuedraggable'
export default {
 name: 'draggabletest',
 components: { 
 draggable,
 },
 data () {
 return {
 listdata:[
 {
 id: 1,
 name: '葉落森1'
 },
 {
 id: 2,
 name: '葉落森2'
 },
 {
 id: 3,
 name: '葉落森3'
 },
 {
 id: 4,
 name: '葉落森4'
 },
 {
 id: 5,
 name: '葉落森5'
 }
 ]
 }
 },
}
</script>