美文网首页
Vue.Draggable 拖拽排序(小记)

Vue.Draggable 拖拽排序(小记)

作者: 可乐_加冰_ | 来源:发表于2022-09-20 11:25 被阅读0次

-官方文档 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)
      });
    },

相关文章

网友评论

      本文标题:Vue.Draggable 拖拽排序(小记)

      本文链接:https://www.haomeiwen.com/subject/ecvbortx.html