前端-拖拽实现列表排序

转载至https://www.crazyming.com/note/757/

使用拖拽功能来实现排序。

需要先学习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)”

    <li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true"@dragstart="drag($event,index)" @drop="drop($event,index)" @dragover='allowDrop($event)'><div class="li_item order">{{index+1}}</div><div class="li_item title"><input v-model.trim="item.name" type="text" placeholder="请输入站点名称"></div><div class="li_item url"><input v-model.trim="item.url" type="text"placeholder="链接需加上 http:// 或 https://"></div><div class="li_item description"><input v-model.trim="item.description" type="text" placeholder="请输入描述"></div><div class="li_item option"><el-button type="text" @click="deleteLink(index)">删除</el-button></div></li>

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 等框架是数据驱动视图,数组变化了,界面也会变化.

效果:

前端-拖拽实现列表排序相关推荐

html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)
FullCalendarDemo5 控件的实例讲解-拖拽实现值班排班(五) (五)c# asp.net 操作FullCalendarDemo5 导出排班记录目的:点击导出按钮,弹出参数指定对话框,选 ...
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
HTML5 元素拖拽实现及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...
Silverlight中的拖拽实现的图片上传---1
在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的. 传统的上传都是打开对话框,选择 ...
html拖拽显示获取坐标,html界面元素拖拽实现［超简单］
就是一个十分简单的小功能,将一个html界面元素从一个地方拖到另一个地方(复制或移动) html部分,省略部分非关键代码 A股拖拽js部分, 即监听部分 $('#ma').bind('dragsta ...
Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: http://www.w3school.com.cn/html5/html_5_draganddrop.asp 菜鸟教程: http://www.runoob.c ...
使用HTML5拖拽实现表格列移动
纯前端的移动,不重载数据,不支持换页和数据刷新实现代码,调用在表格加载完成之后 function add_drag_th(){//允许放入 $("#callGrid tr>th&qu ...
Unity3D鼠标拖拽实现相机移动
实现拖拽的方法: 通过创建一个X-Z平面得到从屏幕发出的射线到当前X-Z平面的碰撞点得到的位置作为起始位置和结束位置当鼠标按下的时候得到的是初始位置当鼠标松开的时候得到的是结束位置得到两 ...

前端-拖拽实现列表排序

前端-拖拽实现列表排序相关推荐

最新文章

热门文章