拖拽排序功能

最終功能演示如圖：

我們有個功能是要求這些字段可以進行排序的，我們以前是給每行加個權重字段，通過編輯權重進行排序。泰康這邊覺得直接拖拽更好點。

於是就找了 vue-slicksort 這個插件，感覺還不錯。具體API可以看 文檔 ， 樣式就自己按照設計圖修改自己的就可以了

<template>
  <div>
    <SortableList v-model="items" lockAxis="y" @input="getArr">
      <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"></SortableItem>
    </SortableList>
  </div>
</template>

<script>
// 引入兩個混入
import { ContainerMixin ,ElementMixin } from 'vue-slicksort'
import delImg from 'assets/images/del.png'

export default {
  name: "druggen",
  // 定義兩個子組件，最好可以單獨寫
  components:{
    "SortableList":{
      mixins: [ContainerMixin],
      template:`
        <ul class="slicksortUl">
          <li class="slickHead">
            <div class="slickFir">字段序號</div> 
            <div class="slickSec">字段名</div> 
            <div class="slickThree">操作</div> 
          </li>
          <slot />
        </ul>`
    },
    "SortableItem":{
      mixins: [ElementMixin],
      props: ['item'],
      data(){
        return {
           delImg:delImg 
        }  
      },
      template:`
        <li class="slicksortItem">
          <div class="slickFir">字段{{index+1}}</div>
          <div class="slickSec">{{item}}</div>
          <div class="slickThree">
            <img class="delImg" :src="delImg"/>
          </div>  
        </li>
        `
    }
  },
  data() {
    return {
      items: ['等級', '職位', '成本中心', '姓名', '部門']
    };
  },
  methods: {
    getArr(list){
      console.log('newList is ',list)    
    },
  }
};
</script>

<style>


</style>