-官方文档 https://github.com/SortableJS/Vue.Draggable
<draggable v-model="form_images" group="people" @start="drag=true" @end="dragend">
</draggable>
form_images = [
{id: 98, img_url: "20220919\4253950177a76ba3655cf09c30623887.png", sort: 0,…}
{id: 97, img_url: "20220919\91cfb9e46e8ca5a490f0ff20ee38d249.jpg", sort: 1,…}
{id: 96, img_url: "20220919\b8059eb02d6e515ae95f21171c7efc5e.jpg", sort: 2,…}
{id: 99, img_url: "20220920\5ae062dac4636b73a4059ebc40ccb26c.jpg", sort: 3,…}
]
dragend(event){
//todo 移动结束后,前端数据会自动排序。。后台可以根据数据索引值,进行排序即可
//调换顺序
let that = this;
that.$post('v1/setSortVal', {
form_data: JSON.stringify(that.form_images),
}).then(response => {
console.log('拖拽排序更新成功:', response)
}).catch(err => {
console.log(err)
});
},
网友评论