Vue的v-for中列表项拖拽排序详细方法
首先:HTML中,关键点是监听拖拽的三个阶段,即:dragstart/dragover/dragend,注意:要拖拽元素必须加上draggable="true"
<ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="taskListUl"> <li v-for="(subTask,index) in subTaskList" draggable="true" :id="subTask.id" :key="subTask.id"> <el-row> <el-col :lg="20"> <div class="main"> <el-row> <el-col :span="3"><el-checkbox></el-checkbox></el-col> <el-col :span="21" class="taskEdit" v-if="show.isShowEdit !== index" :title="subTask.name">{{subTask.name}}</el-col> <el-col :span="21" v-else> <el-row style="width: 300px;"> <el-form ref="taskEditForm" :model="subTask"> <el-col :span="14"> <el-input v-model="subTask.name" size="mini" @keyup.enter.native="saveSubTask('subTaskForm',subTask);showEditTitle()"></el-input> </el-col> <el-col :span="10"> <el-button type="primary" style="font-size:12px;color:#fff;margin-left:4px;padding:5px 8px;border:0;" size="mini" @click="saveSubTask('subTaskForm',subTask);handleTaskEdit()">保存</el-button> <el-button style="font-size:12px;padding:5px 8px;border:0;" size="mini" @click="handleTaskEdit">取消</el-button> </el-col> </el-form> </el-row> </el-col> </el-row> </div> <div class="icon1" v-if="show.isShowEdit !== index"> <el-button circle size="mini" @click="handleTaskEdit(index)"><i class="el-icon-edit"></i></el-button> <el-button circle size="mini" @click="handleTaskDelete(index,subTask.id)"><i class="el-icon-delete"></i></el-button> </div> <div class="icon2"> <el-button circle size="mini"><i class="el-icon-s-finance"></i></el-button> <el-button circle size="mini"><i class="el-icon-user"></i></el-button> </div> </el-col> </el-row> </li></ul>其次,JavaScript中data() { return { subTaskList: []
}},methods: {
onDragStart(event){ //用于在拖拽开始时获取被拖拽元素 console.log("drag start") this.draging=event.target; console.log(this.draging);},onDragOver(event){ //用于在拖拽过程中,获取拖拽元素经过的对象,以及对元素顺序做出调整 console.log('drag move'); this.target=event.path[5]; //li的位置 let targetTop=event.target.getBoundingClientRect().top; let dragingTop=this.draging.getBoundingClientRect().top; if (this.target.nodeName === "LI"&&this.target !== this.draging) { if (this.target) { if (this.target.animated) { return; } } if(this._index(this.draging)<this._index(this.target)){ this.target.parentNode.insertBefore(this.draging,this.target.nextSibling); }else{ this.target.parentNode.insertBefore(this.draging, this.target); } this._anim(targetTop,this.target); this._anim(dragingTop,this.draging); }},_anim(startPos,dom) { //用于重绘元素 let offset = startPos - dom.getBoundingClientRect().top; dom.style.transition = "none"; dom.style.transform = `translateY(${offset}px)`; //触发重绘 dom.offsetWidth; dom.style.transition="transform .3s"; dom.style.transform=``; clearTimeout(dom.animated); dom.animated=setTimeout(()=>{ dom.style.transition=""; dom.style.transform=``; dom.animated=false; },300)},onDragEnd(event){ //结束后跟俊最终拖拽调整subTaskList数组
console.log('drag end'); //获取排序后的li节点数组 let currentNodes=Array.from(this.$refs.taskListUl.childNodes); let newArr = []; for(let i=0;i<currentNodes.length;i++) { for(let j=0;j<this.subTaskList.length;j++) { if(currentNodes[i].id == this.subTaskList[j].id){ newArr[i] = this.subTaskList[j]; } } } this.subTaskList = newArr; console.log(this.subTaskList);}, _index(el){ //用于根据元素id来获取对应元素的索引值
let domData=Array.from(this.$refs.taskListUl.childNodes); return domData.findIndex((currentValue,index,arr)=>{ return el.id == currentValue.id; });},
}
转载于:https://www.cnblogs.com/yccg990118/p/11212338.html
Vue的v-for中列表项拖拽排序详细方法相关推荐
- html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...
- vue项目中draggable实现拖拽排序
本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能,先简单展示下具体功能. 如上图所示,点击[排序]之前list中每个item不能进行排序,当选中[排序]后可以拖拽的方式进行排序.下面 ...
- vue 基于elementUI、sortablejs的表格拖拽排序
安装 sortablejs npm install sortablejs template <el-tablerow-key="id":data="moduleCo ...
- vue中实现拖拽排序
原生拖拽 API 实现拖拽 设置元素 dragable 将元素的 dragable 属性设置 为 true (文本 图片 链接 的draggable 属性默认为 true)则元素可拖放 <div ...
- php实现拖拽排序,H5实现拖拽排序的代码
本篇文章给大家带来的内容是关于H5实现拖拽排序的代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.需求 豆果食谱系统,sku列表实现拖拽排序,如图: 二.HTML5拖放API ...
- html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候 我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然 ...
- li前面的原点或者方的样式修改html中列表项li所显示的圆点的颜色?,以及相关样式的设定...
如何修改html中列表项li所显示的圆点的颜色?,以及相关样式的设定 这是li标签自带的圆点的颜色改变,代码如下: .centerbt li{ content:"."; col ...
- jQuery Mobile中列表项ol、ul中的li的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表项li的data-*选项 //带有 data-role="listvie ...
- 全网为数不多清晰可行的在VUE中使用sortable.js实现动态拖拽排序的教程!
目录 0 写在前面的 1 依赖安装 2 手写简单标签演示 3 要点 4 效果 0 写在前面的 首先批评以下文章 (10条消息) sortable.js 实现拖拽_sortablejs_花铛的博客-CS ...
最新文章
- 飞桨博士会第三期来啦!中国深度学习技术俱乐部诚邀您加入
- 【数据平台】Eclipse+Scala开发环境(本机和集群两个运行模式)
- Chrome DevTools
- ajax请求后台php数据时查看报错parse error
- 2017/2/25 学习笔记
- 新手C语言学习第一课——小学生水平级
- 计算机网络的三大功能,计算机网络的三大主要功能是什么
- 去除IDEA中代码的波浪线(黄色警示线)
- 翻倍增长!C-V2X商业化“提速”,新一代模组加速“助跑”
- 有赞实时计算 Flink 1.13 升级实践
- 2021巢湖学院高考成绩查询,2021年巢湖学院录取结果查询网址入口及录取结果公布时间...
- 0.前端简历编写和面试前准备
- 老李谈HTTP1.1的长连接 1
- ThinkPad触摸板开启或者关闭方法
- 简单使用AspectJ
- 关于使用Java Mail 发邮件,连接超时问题
- 3D模型欣赏:超写实的性感金发美女3D角色 整体动作造型塑造自然协调【3D游戏建模教程】
- 换电脑怎么转移大量资料?新旧电脑数据转移?
- 浏览器如何验证HTTPS证书的合法性?
- 周末出动:广州起义烈士陵园