1.拖拽排序 使用 sortablejs库
npm install sortablejs --save-dev
<template>
<view id="list">
<view v-for="(item, index) in list" :key="item.id" class="item">
{{ item.name }}
</view>
</view>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
list: [{
id: 1,
name: "列表项1"
},
{
id: 2,
name: "列表项2"
},
{
id: 3,
name: "列表项3"
},
{
id: 5,
name: "列表项5"
},{
id: 6,
name: "列表项6"
},{
id: 7,
name: "列表项7"
},{
id: 8,
name: "列表项8"
},{
id: 9,
name: "列表项9"
},{
id: 10,
name: "列表项10"
},{
id: 11,
name: "列表项11"
},{
id: 12,
name: "列表项12"
},{
id: 13,
name: "列表项13"
},{
id: 14,
name: "列表项14"
}
]
};
},
mounted() {
this.initSortable();
},
methods: {
initSortable() {
const list = document.getElementById("list");
new Sortable(list, {
animation: 150,
onUpdate: this.handleUpdate
});
},
handleUpdate(event) {
const {
oldIndex,
newIndex
} = event;
const item = this.list.splice(oldIndex, 1)[0];
this.list.splice(newIndex, 0, item);
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
}
.item {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
2.拖拽到指定位置并停留
<template>
<view class="container">
<movable-area class="area">
<movable-view
v-for="(item, index) in list"
:key="item.id"
:x="0"
:y="item.y"
direction="vertical"
@change="handleMove(index, $event)"
class="item"
>
{{ item.name }}
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "列表项1", y: 0 },
{ id: 2, name: "列表项2", y: 50 },
{ id: 3, name: "列表项3", y: 100 },
{ id: 4, name: "列表项4", y: 150 }
]
};
},
methods: {
handleMove(index, event) {
const { y } = event.detail;
this.list[index].y = y;
this.sortList();
},
sortList() {
this.list.sort((a, b) => a.y - b.y);
}
}
};
</script>
<style scoped>
.container {
height: 300px;
}
.area {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 50px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
}
</style>
