配合后端有个orderNumber的排序

1 引用vueDraggable组件

2 主要关注orderNum的改变

3 给后端传值是传 改变项的iid和orderNum

<template>
  <div class="approvalStyle">
    <draggle v-model="draggleList" @end="end" @start="start">
      <transition-group>
        <div class="listStyle" v-for="item in draggleList" :key="item.value">{{ item.name 
 }}</div>
      </transition-group>
    </draggle>
  </div>
</template>

<script>
import draggle from 'vuedraggable'
export default {
  name: 'JMapApprovalMessage',
  components: {
    draggle
  },
  data () {
    return {
      // 最后要传给后端的数据
      changDragg: [],
      tempArr: [],
      draggleList: [
        {
          name: 'caltaLog',
          value: '1',
          orderNum: '1'
        },
        {
          name: 'implelist',
          value: '2',
          orderNum: '2'
        },
        {
          name: 'coming',
          value: '3',
          orderNum: '3'
        }
      ],
    }
  },
  created () {
    //先把原先数据的orderNum 暂存
    this.draggleList.map(item => {
      this.tempArr.push(item.orderNum)
    })
    this.tempArr.sort((a, b) => a - b)
    console.log(this.tempArr)
  },
  methods: {
    start (e) {
      console.log(e, 'start')
    },
  //  拖拽完成后的事件
    end (e) {
      this.draggleList.map((item, index) => {
        if (item.orderNum !== this.tempArr[index]) {
          item.orderNum = this.tempArr[index]
          this.changDragg.map((element, j) => {
            if (item.key === element.key) {
              this.tempArr.splice(j - 1)
            }
          })
          this.changDragg.push(item)
        }
      })
    
      console.log(this.draggleList)
      console.log(this.changDragg, 'mydraggleList')
    }
  }
}
</script>

<style lang="less" scoped>
  .approvalStyle{
    .listStyle{
      font-size: 16px;
      padding: 20px;
      background: #fff;
      width:300px;
      border:1px solid #efefef;
    }
  }
</style>