vue列表拖拽排序功能实现

其他 2019-02-25 17:11:24 阅读次数: 0

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;
　　　　　　　　　　dom.style.transition="transform .3s";
　　　　　　　　　　dom.style.transform=``; 
                //触发重绘
                // 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>

　　

猜你喜欢

转载自www.cnblogs.com/scdisplay/p/10431548.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022