vue 拖拽列表

拖放：

拖动的对象，需要设置draggable属性为true (draggable="true"),
a元素需要href，img元素需要src。
1、被拖对象：dragstart事件，被拖动的元素，开始拖放触发
2、被拖对象：drag事件，被拖放的元素，拖放过程中
3、被拖对象：dragend事件，拖放的对象元素，拖放操作结束
4、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）
5、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
6、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
7、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中

<transition-group>

利用vue原生的组件<transition-group>可实现列表的过渡效果，不仅可以实现进入和离开动画，还可以改变定位。官网示例如下：

官网示例

拖拽列表代码

<template>
  <div class="drag-wrap">
    <h2>这是一个列表拖拽</h2>
    <transition-group name="List">
      <div
        class="drag-list"
        v-for="item in List"
        :key="item.id"
        draggable="true"
        @dragstart="dragstart(item)"
        @dragenter="dragenter(item)"
        @dragend="dragend(item)"
      >{{item.title}}</div>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      List: [
        { id: 1, title: "这里是列表1的标题" },
        { id: 2, title: "这里是列表2的标题" },
        { id: 3, title: "这里是列表3的标题" },
        { id: 4, title: "这里是列表4的标题" },
        { id: 5, title: "这里是列表5的标题" },
        { id: 6, title: "这里是列表6的标题" },
        { id: 7, title: "这里是列表7的标题" }
      ],
      oldItem: '',
      newItem: '',
    }
  },
  methods: {
    // 记录初始信息
    dragstart(item) {
      this.oldItem = item;
    },
    // 记录过程中信息
    dragenter(item) {
      this.newItem = item;
    },
    // 做最终操作
    dragend(item) {
      if(this.oldItem != this.newItem) {
        let oldIndex = this.List.indexOf(this.oldItem);
        let newIndex = this.List.indexOf(this.newItem);
        let newList = [...this.List]; // 中间数组，用于交换两个节点
        // 删除老的节点
        newList.splice(oldIndex,1);
        // 在列表目标位置增加新的节点
        newList.splice(newIndex,0,this.oldItem);
        // 更新this.List，触发transition-group的动画效果
        this.List = [...newList];
      }
    }
  }
}
</script>
<style scoped>
  .List-move {
    transition: transform 1s;
  }
  .drag-list {
    margin: 0 auto;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #20a0ff;
    background-color: #bfa;
  }
</style>

总结

该代码的思路就是

1、拖拽刚开始时记录被拖拽节点
2、在拖拽过程中记录当前经过的节点
3、在拖拽结束后，判断当前经过的节点是否是拖拽刚开始时的节点
4、如果节点位置发生了改变，就利用一个中间数组将两个节点交换位置，然后更新List
5、当List更新时会触发<transition-group>的.List-move过渡属性，实现动画效果

最后编辑于：2020.07.20 20:34:49