vue列表拖拽排序功能实现
1.实现目标：目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。
2.实现思路：
2.1是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。
2.2使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transform计算数组项顺序，得出新数组用vue数据驱动的方式重绘列表，重置所有样式。
总的来说就是可以通过不同的监听事件（drag、mouseover），按不同的顺序操作Dom（1.先操作实际dom，再添加动画，在输出数组；2。不操作实际dom，仅改变transfrom，得出新数组，用新数组生成新列表来更新节点）。
3.实际代码
3.1第一种实现
html部分。（被拖拽的元素需要设置draggable=true,否则不会有效果）
<div id="app">
<ul
@dragstart="onDragStart"
@dragover="onDragOver"
@dragend="onDragEnd"
ref="parentNode">
<li
v-for="(item,index) in data"
:key="index"
class="item"
draggable="true"
>{{item}}</li>
</ul>
</div>
拖拽事件有两个对象（被拖拽对象和目标对象）。dragstart 事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖拽元素上。dragover事件：当拖拽元素穿过目标元素时候触发的事件，此事件作用在目标元素上。
在拖拽事件开始时，将本次拖拽的对象保存到变量中。每当dragover事件，将目标对象保存到变量中，添加判断当目标对象和拖拽对象为不同的列表项时，交换两个dom元素的先后顺序。
onDragStart(event){
console.log("drag start")
this.draging=event.target;
},
onDragOver(event){
console.log('drag move')
this.target=event.target;
if (this.target.nodeName === "LI" && this.target !== this.draging) {
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);
}
}
},
onDragEnd(event){
console.log('drag end')
let currentNodes=Array.from(this.$refs.parentNode.childNodes);
let data=currentNodes.map((i,index)=>{
let item=this.data.find(c=>c==i.innerText);
return item
});
console.log(data)
}，
_index(el){
let domData=Array.from(this.$refs.parentNode.childNodes);
return domData.findIndex(i=>i.innerText==el.innerText);
}
现在基本效果有了，然后是添加动画。添加动画的方式是通过transform实现。
因为每次拖拽排序触发时都会改变dom结构，为了实现移动的效果，可以在每次排序时先将dom节点恢复通过transform到原来的位置，使得表现上还是排序前的状态。然后添加transition，同时置空transform实现移动效果。（这里需要重绘才能触发效果，否则两次transform会直接抵消掉，可以使用setTimeout或者ele.offsetWidth来触发重绘），transform的偏移量可以通过改变节点顺序前后的距顶高度来获得。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul{
list-style:none;
padding-bottom:20px;
}
.item{
cursor: pointer;
height:24px;
line-height:24px;
background-color:#9c9c9c;
border:1px solid #d9d9d9;
border-radius:4px;
color:#fff;
padding:10px;
}
</style>
</head>
<body>
<div id="app">
<ul
@dragstart="onDragStart"
@dragover="onDragOver"
@dragend="onDragEnd"
ref="parentNode">
<li
v-for="(item,index) in data"
:key="index"
class="item"
draggable="true"
>{{item}}</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
data:[1,2,3,4,5,6],
draging:null,//被拖拽的对象
target:null,//目标对象
},
mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
},
methods:{
onDragStart(event){
console.log("drag start")
this.draging=event.target;
},
onDragOver(event){
console.log('drag move')
this.target=event.target;
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;
//触发重绘
// setTimeout(()=>{
// dom.style.transition="transform .3s";
// dom.style.transform=``;
// },0)
clearTimeout(dom.animated);
dom.animated=setTimeout(()=>{
dom.style.transition="";
dom.style.transform=``;
dom.animated=false;
},300)
},
onDragEnd(event){
console.log('drag end')
let currentNodes=Array.from(this.$refs.parentNode.childNodes);
let data=currentNodes.map((i,index)=>{
let item=this.data.find(c=>c==i.innerText);
return item
});
console.log(data)
},
_index(el){
let domData=Array.from(this.$refs.parentNode.childNodes);
return domData.findIndex(i=>i.innerText==el.innerText);
}
}
})
</script>
</html>
3.2.第二种实现
mousedown的时候记录下拖拽项和拖拽项初始位置，mouseover的时候将拖拽项和目标项交换位置，添加transform，mouseup的时候遍历出新数组来更新视图。这种方式就是动画不好加，个人瞎琢磨的，应该是思路错误了，放着看看吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul{
list-style:none;
padding-bottom:20px;
}
.item{
cursor: pointer;
height:24px;
line-height:24px;
background-color:#9c9c9c;
border:1px solid #d9d9d9;
border-radius:4px;
color:#fff;
padding:10px;
user-select: none;
}
</style>
</head>
<body>
<div id="app">
<ul
ref="parentNode"
@mouseover="onMouseOver"
@mouseup="onMouseUp">
<li
ref="li"
v-for="(item,index) in data"
:key="index"
class="item"
@mouseDown="(event)=>{onMouseDown(event,index)}"
>{{item}}</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
data:[1,2,3,4,5,6],
isDonw:false,
draging:null,
dragStartPos:0
},
mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
document.onmouseup=()=>{
if(this.isDonw)
this.onMouseUp()
};
},
computed:{
nodes(){
return Array.from(this.$refs.parentNode.children)
},
itemHeight(){
return this.nodes[0].offsetHeight;
}
},
methods:{
onMouseDown(event,index){
this.isDonw=true;
this.draging=this.$refs['li'][index];
this.dragStartPos=this.draging.getBoundingClientRect().top;
},
onMouseOver(event){
if(this.isDonw){
let target=event.target;
let drag=this.draging;
let Index=this._index(target); if(target.nodeName!='UL' && target!=drag){
let targetTop=target.getBoundingClientRect().top;
let dragTop=drag.getBoundingClientRect().top;
let targetOffset=targetTop-dragTop;
let dragOffset=targetTop-this.dragStartPos; //样式变化
let targetStyle= target.style.transform;
let lastTransform=0;
if(targetStyle){
lastTransform=this.getTransform(targetStyle);
}
drag.style.transform=`translateY(${dragOffset}px)`;
target.style.transform=`translateY(${lastTransform-targetOffset}px)`; }
}
},
onMouseUp(){ this.isDonw=false;
this.draging=null;
this.dragStartPos=0; let res=[]
for(let i=0;i<this.nodes.length;i++){
let item=this.nodes[i];
let transform=this.getTransform(item.style.transform);
if(transform){
res[i+transform/this.itemHeight]=this.data[i];
}else{
res[i]=this.data[i];
}
item.style.transform='';
item.style.transition='';
}
this.data=[...res];
console.log(res)
},
getTransform(style){
if(style){
let firstIndex=style.indexOf('(')+1;
let lastIndex=style.indexOf(')')-2;
return parseInt(style.substring(firstIndex,lastIndex))
}
},
_index(el){
let domData=Array.from(this.$refs.parentNode.childNodes);
return domData.findIndex(i=>i.innerText==el.innerText);
}
}
})
</script>
</html>
vue列表拖拽排序功能实现的更多相关文章
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
- php接口实现拖拽排序功能
列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢 先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都 ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
- ListView列表拖拽排序
ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- ListBox实现拖拽排序功能
1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...
- vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能
先上一张效果图,然后再上代码(由于只做效果,未做数据相关的处理:实际处理数据时不修改 dom 元素,只是利用 dom 元素传递数据,然后需改数据,靠数据驱动效果) <div :id=" ...
- vue列表拖拽组件 vue-dragging
安装 $ npm install awe-dnd --save 应用 在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueD ...
- jQuery图片列表拖拽排序布局
在线演示 本地下载
随机推荐
- idea: unable to import maven project
新搭建的maven环境,使用idea创建maven项目时,一直提示 unable to import maven project,百度良久未解决 有说关闭防火前的,亲测无效,后看到说是maven-3. ...
- java中将对象引用设置为null对于GC有没有帮助
相信,网上很多java性能优化的帖子里都会有这么一条: 尽量把不使用的对象显式得置为null.这样有助于内存回收 可以明确的说,这个观点是基本错误的.sun jdk远比我们想象中的机智.完全能判断出对 ...
- D3.js画思维导图（转）
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
- 使用virtualbox安装unbuntu开启共享文件夹时遇到的权限问题
在安装完虚拟机之后,开启文件夹共享,发现只能用root进行访问,个人帐号无权限: cust@hqjia-desktop:/media$ ll drwxr-xr-x 4 root root 4096 2 ...
- Sharding-JDBC（二）2.0.3版本实践
目录 一.Sharding-JDBC依赖 二.分片策略 1. 标准分片策略 2. 复合分片策略 3. Inline表达式分片策略 4. 通过Hint而非SQL解析的方式分片的策略 5. 不分片的策略 ...
- 大数据之路week07--day06 （Sqoop 将关系数据库（oracle、mysql、postgresql等）数据与hadoop数据进行转换的工具）
为了方便后面的学习,在学习Hive的过程中先学习一个工具,那就是Sqoop,你会往后机会发现sqoop是我们在学习大数据框架的最简单的框架了. Sqoop是一个用来将Hadoop和关系型数据库中的数据 ...
- 《团队名称》第九次团队作业：Beta冲刺与验收准备
项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目冲刺 团队名称 发际线总和我作队 作业学习目标 (1)掌握软件黑盒测试技术:(2)掌握软件 ...
- npm run build 时的 warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit ...
- Oracle密码过期 ORA-28002:口令将过期 解决方法
登录Pl/sql或导出数据时,得到的提示信息: UDE-28002: 操作产生了 Oracle 错误 28002ORA-28002: the password will expire within 7 ...
- python中类的函数中的self
Python类中的self到底是干啥的 Python编写类的时候,每个函数参数第一个参数都是self,一开始我不管它到底是干嘛的,只知道必须要写上.后来对Python渐渐熟悉了一点,再回头看self的 ...