标签：index Vue console log checkMenusList element vuedraggable evt 拖拽

新需求是要求界面上的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" alt="" >
　　　　</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排序。

标签：index,Vue,console,log,checkMenusList,element,vuedraggable,evt,拖拽
来源： https://www.cnblogs.com/2001-/p/11164722.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。