首页 > 其他 > 详细

Vue+element 需要用到拖拽组件 vuedraggable

时间:2019-07-22 15:21:42      阅读:169      评论:0      收藏:0      [点我收藏+]

新需求是要求界面上的14个可以拖拽,点击保存之后保存拖拽之后的顺序。

确定需求之后肯定第一时间是百度,发现有个插件vuedragger拖拽,按照教程就懵懂的开始了。

官方示例:https://david-desmaisons.github.io/draggable-example/

1.安装

npm install vuedraggable

2.引入

import draggable from ‘vuedraggable‘

 

3.注册

components: { 

draggable

}

html

<draggable @update="datadragEnd" :options = "options" v-model="tableData" style=‘sort: false‘ >
  <transition-group >
    <el-checkbox @change="handleCheckedCitiesChange(item.id)" v-model="checkList" v-for="item in tableData" :key="item.id" :label="item.id" :disabled="isDisabled" >
      <img style="width:150px;height:150px;" :src="item.img"  >
    </el-checkbox>
  </transition-group>
</draggable>

 js相关处理

getdata(evt) {
    console.log(evt.draggedContext.filterKey)
    //这里evt.draggedContext后续的内容根据具体的定义变量而定
},
datadragEnd(evt) {
    evt.preventDefault();
        console.log(‘拖动前的索引 :‘ + evt.oldIndex)
        console.log(‘拖动后的索引 :‘ + evt.newIndex)
        this.checkMenusList = []
        this.tableData.map((item,index) =>{
          this.checkMenusList.push({sortNum: index+1+"", menuId: item.id,rovinceCode:this.page.token})
          return  this.checkMenusList
        })
}

index:获取拖拽后的下标,传给后台,按照sortNum排序。

Vue+element 需要用到拖拽组件 vuedraggable

原文:https://www.cnblogs.com/2001-/p/11164722.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!