跨表格拖拽功能

最新推荐文章于 2023-09-28 11:03:35 发布

超酷的我

最新推荐文章于 2023-09-28 11:03:35 发布

阅读量190

点赞数

文章标签： javascript css3 vue.js html5 es6

本文链接：https://blog.csdn.net/qq_45384585/article/details/109307685

版权

手写多个表格之间拖拽功能

在这里插入图片描述

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

<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>
  <title>Document</title>
  <style>
    .List-move {
      transition: transform 1s;
    }

    * {
      box-sizing: border-box;
    }

    .drag-list {
      margin: 0 auto;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #20a0ff;
      background-color: #bfa;
    }

    .box1 {
      height: 300px;
      width: 300px;
      overflow: auto;
      float: left;
      border: 1px solid #000;
    }

    .box2 {
      height: 300px;
      float: left;
      margin-left: 30px;
      border: 1px solid #000;
      width: 300px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="drag-wrap">
      <div class="box1">
        <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>


      <div class="box2">
        <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>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      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的标题"
            }
          ],
          list: [{
            id: 8,
            title: "这里是列表8的标题"
          }, {
            id: 9,
            title: "这里是列表9的标题"
          }],
          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 oldflag = false
            let newflag = false

            if (oldIndex === -1) {
              oldflag = true
              oldIndex = this.list.indexOf(this.oldItem);
            }

            if (newIndex === -1) {
              newflag = true
              newIndex = this.list.indexOf(this.newItem);
            }

            let newList = [...this.List]; // 中间数组，用于交换两个节点
            let newlist = [...this.list]; // 中间数组，用于交换两个节点

            if (!oldflag) {
              newList.splice(oldIndex, 1);
            } else {
              newlist.splice(oldIndex, 1);
            }

            if (!newflag) {
              newList.splice(newIndex, 0, this.oldItem);
            } else {
              newlist.splice(newIndex, 0, this.oldItem);
            }

            // 删除老的节点
            // newList.splice(oldIndex, 1);
            // // 在列表目标位置增加新的节点
            // newList.splice(newIndex, 0, this.oldItem);
            // // 更新this.List，触发transition-group的动画效果
            this.List = [...newList];
            this.list = [...newlist];
          }
        }
      }


    })
  </script>
</body>

</html>

超酷的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨表格拖拽功能

手写多个表格之间拖拽功能<!DOCTYPE html><html lang="en"><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"></s
复制链接

扫一扫