Vue+element 需要用到拖拽组件 vuedraggable
新需求是要求界面上的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>
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的更多相关文章
- VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- Vue 拖拽组件 vuedraggable 和 awe-dnd
vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dn ...
- Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd
参考链接:http://www.ptbird.cn/vue-draggable-dragging.html vue-draggable 学习和使用:https://www.jianshu.com/p/ ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue-slicksort拖拽组件
vue-slicksort拖拽组件 安装 通过npm安装 $ npm install vue-slicksort --save 通过yarn安装 $ yarn add vue-slicksort 插件 ...
- Vue-Grid-Layout分享一款好用的可拖拽组件
在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid ...
随机推荐
- CSS性能优化的8个技巧
本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...
- Java冒泡排序,二分查找法
冒泡排序 int[] arr = {1,7,6,2,8,4}; int temp ; //只需 运行 5次 for (int i = 0; i < arr.length - 1; i++) { ...
- Chrome和Safari浏览器preventDefault报treated as passive错误
Chrome和Safari浏览器preventDefault报treated as passive错误 问题代码是: document.addEventListener('touchmove', fu ...
- 【Android-代码破解】代码破解步骤
一.准备工具 准备要破解的apk 下载dex2jar 下载jd-gui 下载apk-tool 二.反编译apk得到Java源代码 (dex2jar是将apk中的classes.dex转化成Jar文件, ...
- 使用laravel-wechat微信支付
参考文档 https://github.com/overtrue/laravel-wechat https://easywechat.com/docs/4.1/payment/index larave ...
- Codevs 1574 广义斐波那契数列(矩阵乘法)
1574 广义斐波那契数列 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 广义的斐波那契数列是指形如an=p*an-1+q* ...
- Jenkins发布.Net Core项目到IIS
安装Java8,Git,和Jenkins及插件. jenkins安装后以windows服务的方式运行,浏览器访问本机8080端口可访问. 自动部署的原理分为三步,首先从git服务器获取最新代码,然后用 ...
- JS如何实现在微信中调用外部浏览器打开指定链接
使用方法,复制以下贴到index.php 顶部就可以了.场景 比如网页包含视频播放 在QQ\WX打开QQ\WX直接调用自己的播放器播放,而且播放完成还有AD推送,非常恶心,所以有了以下代码有乱码的话 ...
- Django-cookie-sesson
一 会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10086服务人员就是服务器 ...
- python_re模块
正则表达式:http://www.regexlab.com/zh/regref.htm