通过js实现拖拽排序

halo1416

已于 2022-02-10 14:04:18 修改

阅读量3k

点赞数 3

分类专栏： JavaScript 文章标签： vue.js javascript 前端拖拽排序

于 2022-02-10 11:16:06 首次发布

本文链接：https://blog.csdn.net/halo1416/article/details/122856637

版权

JavaScript 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、实现效果

请添加图片描述

二、实现效果

实现原理： 主要依靠原生的 dragstart 和 dragend 事件

当然：也可以基于插件 vue.draggable 实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
  <title>test</title>
  <style type="text/css">
    .flip-list-move {
      transition: transform 0.3s ease-in;
    }

    .box {
      display: block;
      display: flex;
      width: 500px;
      flex-wrap: wrap;
    }

    .items {
      width: 100px;
      height: 50px;
      margin: 10px;
      line-height: 50px;
      text-align: center;
      border: 2px solid red;
      border-radius: 4px;
      cursor: move;
      background: #eee;
    }

    .items.active {
      background: rgba(0, 0, 0, 0.4);
    }
  </style>
</head>

<body>
  <div id="content">
    <transition-group name="flip-list" class="box">
      <div v-for="item in items" :key="item" draggable="true" class="items"
        :class="{active: oldVal == item && isActive==item}" @dragstart="dragstart(item)" @dragenter="dragenter(item)"
        @dragend="dragend(item)">
        {{item}}
      </div>
    </transition-group>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <script>
    var vue = new Vue({
      el: '#content',
      data: {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        isActive: 0,
        oldVal: 0,
        newOld: 0,
      },
      methods: {
        dragstart(val) {
          // 保存旧的节点和当前正在操作的节点
          this.oldVal = val;
          this.isActive = val;
          console.log('-------dragstart val', val);
          console.log('-------dragstart this.oldVal', this.oldVal);
          console.log('-------dragstart this.isActive', this.isActive);
        },
        dragend(val) {
          if (this.oldVal != this.newOld) {
            let oldIndex = this.items.indexOf(this.oldVal);
            let newIndex = this.items.indexOf(this.newOld);
            let newItems = [...this.items];
            // 删除老的节点
            newItems.splice(oldIndex, 1);
            // 增加新的节点
            newItems.splice(newIndex, 0, this.oldVal);
            // items结构发生变化触发transition-group的动画
            this.items = [...newItems];
            // 重置正在操作的节点
            this.isActive = -1;
          }
        },
        // 记录移动过程中信息
        dragenter(val) {
          // 即保存要将当前移动的节点放到那个位置
          this.newOld = val;
          console.log('-----------dragenter val', val);
          console.log('-----------dragenter this.newOld', this.newOld);
        },
      },
    });
  </script>
</body>

</html>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

halo1416

关注

3
点赞
踩
32

收藏

觉得还不错? 一键收藏
4
评论
通过js实现拖拽排序

一、实现效果二、实现效果实现原理：主要依靠原生的 dragstart 和 dragend 事件当然：也可以基于插件 vue.draggable 实现<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=
复制链接

扫一扫