美文网首页
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