【SlickList】拖拽插件，基本用法

看到个好玩的插件，试了试。
原文章：点我

先看效果

安装

npm i vue-slicksort -S

使用

import { SlickList, SlickItem } from "vue-slicksort";
export default {
  components: {
    SlickList,
    SlickItem
  },

完整代码

<template>
<div class="slicksort-wrap">
              <!-- 拖拽 -->
              <SlickList
                :lockToContainerEdges="true"
                lockAxis="y"
                v-model="items"
                @input="getChangeLists"
              >
                <SlickItem
                  v-for="(item, index) in items"
                  :index="index"
                  :key="index"
                >
                  <p class="sLickP">{{item}}</p>
                </SlickItem>
              </SlickList>
            </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
  components: {
    SlickList,
    SlickItem
  },
  data() {
	return {
		items: ['白日依山尽', '黄河入海流', '欲穷千里目', '更上一层楼'],
		}
	},
  methods:{
  	getChangeLists(vals) {
      // 拖拽完成后返回被打乱后的顺序
      console.log(vals);
    },
  }
}	
</script>