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>