表格拖拽功能

最新推荐文章于 2024-08-08 15:28:54 发布

超酷的我

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量591

点赞数

文章标签： vue.js html css javascript css3

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

版权

在这里插入图片描述
可以随意拖拽表格顺序

<!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;
      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) {
        this.draging = event.target;
      },
      onDragOver(event) {
        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 = ``;
        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>

超酷的我

关注

0
点赞
踩
3

收藏

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

可以随一拖拽表格顺序<!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> &.
复制链接

扫一扫