vue列表拖拽排序功能实现

最新推荐文章于 2024-06-19 15:39:02 发布

Yemh

最新推荐文章于 2024-06-19 15:39:02 发布

阅读量1.1k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_45039540/article/details/112970439

版权

Vue 拖拽排序 DOM操作动画效果事件监听

关键词由CSDN通过智能技术生成

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue列表拖拽排序功能实现

一、实现目标？
二、实现思路
三、实际代码

一、实现目标？

目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。

二、实现思路

1、是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。

2、使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transform计算数组项顺序，得出新数组用vue数据驱动的方式重绘列表，重置所有样式。

总的来说就是可以通过不同的监听事件（drag、mouseover），按不同的顺序操作Dom（1.先操作实际dom，再添加动画，在输出数组；2。不操作实际dom，仅改变transfrom，得出新数组，用新数组生成新列表来更新节点）。

三、实际代码

第一种实现

html部分（被拖拽的元素需要设置draggable=true,否则不会有效果）

<div id="app">
  <ul
	  ref="parentNode"
	  @dragstart="onDragStart"
	  @dragover="onDragOver"
	  @dragend="onDragEnd">
	    <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
        ref="parentNode"
        @dragstart="onDragStart"
        @dragover="onDragOver"
        @dragend="onDragEnd"
      >
        <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>

第二种实现

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>

Yemh

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue列表拖拽排序功能实现

vue列表拖拽排序功能实现一、实现目标？二、实现思路三、实际代码第一种实现完整代码：第二种实现一、实现目标？目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。二、实现思路1、是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。2、使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transfo
复制链接

扫一扫