html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候 我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然体验不是很好,
我想到了使用拖拽功能来实现排序。
需要先学习w3cschool 关于拖拽的教程:http://www.w3school.com.cn/html5/html_5_draganddrop.asp
上方的教程是操作dom 的,而我的项目使用vue,vue是数据驱动视图的框架,下图中的列表是v-for遍历 友情链接数组 渲染出来的,因此 我这里的拖拽只需对 友情链接数组 进行操作就可以了。
这样的方法 同样也可以 应用在angular 等框架上,换汤不换药,,
这是渲染列表要用到的数组:
linkData: [
{name:'百度',url:'wwww.baidu.com',description:'baidu'},
{name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
{name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
{name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
{name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
]
渲染后的效果图:
在需 循环渲染的li 标签上 加上draggable=”true” 使li 标签可以被拖放,然后加上 @dragstart=”drag($event,index)”
@dragstart="drag($event,index)" @drop="drop($event,index)" @dragover='allowDrop($event)'>
placeholder="链接需加上 http:// 或 https://">
删除
dragstart drop dragover 这三个事件 绑定的方法 这样写:
drag(event, index) {
event.dataTransfer.setData('index', index);
},
drop(event, index) {
event.preventDefault();
let startIndex = parseInt(event.dataTransfer.getData('index'));
let currentIndex = parseInt(index);
console.log("start", startIndex);
console.log("drop", currentIndex);
if (startIndex - currentIndex > 0) {
console.log("要拖拽的元素的索引 大于 当前位置的元素的索引");
this.linkData.splice(currentIndex, 0, this.linkData[startIndex]);
console.log("删除" + startIndex + 1);
this.linkData.splice(startIndex + 1, 1)
} else if (startIndex - currentIndex < 0) {
console.log("要拖拽的元素的索引 小于 当前位置的元素的索引");
this.linkData.splice(currentIndex + 1, 0, this.linkData[startIndex]);
this.linkData.splice(startIndex, 1)
} else {
console.log("什么也不用做");
}
},
allowDrop(event) {
event.preventDefault();
}
具体的这三个事件的用法在w3cschool 有讲,, 拖拽 li 标签,我们实际上是 操作的linkData 数组,利用数组的 splice方法 删除 添加元素,从而实现对数组的拖拽排序. 因为vue angular 等框架是数据驱动视图,数组变化了,界面也会变化.
效果:
7+
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里
发表评论邮箱地址不会被公开。
评论
名称
电子邮件
站点
html5 list 拖拽排序,vue实现可拖拽排序的列表相关推荐
- vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用 首先在使用的组件中引入 import draggable f ...
- Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
- VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性 属性名称 说明 group :gr ...
- html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
- 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
- 拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
- 【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
- android gridview拖动排序,Asp.net GridView 拖拽排序 原创(欢迎拍砖,敬请嘴下留情!)...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
- vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮 功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 功能介绍: 在移动端开发中, ...
最新文章
- 在Windows下编译FFmpeg详细说明
- 喜报!阿里云自研云原生数据仓库 AnalyticDB 获奖啦!
- Java文件类boolean isDirectory()方法(带示例)
- Asp.Net的Forms验证,解决Cookie和Seesion失效时间。
- ARP 协议 理解
- hibernate Restrictions 用法
- 347.前K个高频元素(力扣leetcode) 博主可答疑该问题
- Ubuntu10.10下安装Tor,PolipoVidalia
- 机器学习之线性回归 Linear Regression(二)Python实现
- 出走海报,立体感搞出来
- python音乐下载_python 音乐下载演示源代码
- RBF-UKF径向基神经网络结合无迹卡尔曼滤波估计锂离子电池SOC(附MATLAB代码)
- 应用层的HTTP和HTTPS
- Camtasia2023简单易用的电脑录屏视频剪辑软件
- 柠檬被虐待了 · 404设计#1
- php+实现群发微信模板消息_使用php实现微信小程序发送模板消息(附代码)
- 正则表达式入门级别详细教程
- [TCL]Tcl语言基礎教程(二)
- 红黑夜法官 c++(缺陷版)
- ‘rimraf‘ 不是内部或外部命令,也不是可运行的程序解决方案