vuedraggable 實現拖動數據改變

  // 引入組件  import Draggable from 'vuedraggable'

// 使用組件 DragList 為自己封裝好的組件  注意一定要使用vue的sync
<DragList :sortArr.sync="sortArr"></DragList>

　　

// dragList組件
// :value 為綁定的傳承 通過他來替換
<!--拖動排序列表-->
<template>
  <ul class="sort-ul">
    <Draggable  group="article" :value="sortArr" @input="handleListChange($event)">
      <li v-for="(item,index) in sortArr" :key="index">
        <h2>{{item.title}} <small>普通組</small></h2>
        <p>共4個字段，已配置3個字段，已額外添加3個字段。共4個字段，已額 </p>
      </li>
    </Draggable>
  </ul>
</template>

<script>
  import Draggable from 'vuedraggable'

  export default {
    name: 'sortDragList',
    data(){

      return {
      }
    },
    props:{
      sortArr: [Object,Array]
    },

    components: {
      Draggable
    },
    methods:{
      // 更新位置
      handleListChange(event){
        this.$emit('update:sortArr', event)
      }
    }
  }
</script>