vue引入SlickList, SlickItem实现元素的拖动

HTML

最近看到vue有直接实现拖动的小组件，试了试，感觉还挺简单的，就可以实现元素的拖动，直接数组的元素的位置移动。

    <div>
      <SlickList v-model="items" axis="xy" :distance="5" style"  display: flex; gap: 10px;flex-wrap: wrap;">
        <SlickItem v-for="(item, index) in items" :key="index" :index="index">
          <div style="width:200px;border:2px solid black;padding:5px;">
            <p>班级：{{ item.class }}</p>
            <p>姓名:{{ item.name }}</p>
          </div>
        </SlickItem>
      </SlickList>

      <div>
        {{ items }}
      </div>

导入并注册SlickList, SlickItem

import { SlickList, SlickItem, HandleDirective } from 'vue-slicksort';
@Component({ components: {  SlickList, SlickItem } })

定义数据items数组

  items: { name: string; class: string }[] = [
    { name: '周一', class: '一班' },
    { name: '周二', class: '二班' },
    { name: '周三', class: '三班' },
  ];

实现效果图

SlickList属性参考来源： Vue 中的vue-slicksort拖拽效果组件