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: '三班' },
];