原生JS实现拖拽排序

奥吼吼~~

已于 2023-09-14 14:20:48 修改

阅读量393

点赞数

文章标签： javascript 前端开发语言

于 2023-09-14 14:19:17 首次发布

本文链接：https://blog.csdn.net/zhoulib__/article/details/132875174

版权

文章介绍了使用HTML、CSS和JavaScript创建了一个可拖动的列表，当拖动项进入目标位置时，列表项会执行翻转动画。实现了元素的移动和视觉反馈。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
        background: #448808;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        border-radius: 8px;
        /* transition: all 0.5s; */
      }
      li + li {
        margin-top: 10px;
      }
      ul {
        width: 80%;
        margin: 20px auto;
      }
      .touch {
        background: #222277;
      }
    </style>
  </head>

  <body>
    <div>
      <ul ondrag>
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
        <li draggable="true">5</li>
      </ul>
    </div>
    <script>
      
      class Filp {
        constructor(ele, time = 500) {
          this.animationEle = ele;
          this.playStatus = 'init'
          const { x: oldX, y: oldY } = this.getRect(this.animationEle);
          setTimeout(() => {
            var { x: newX, y: newY } = this.getRect(this.animationEle);
            this.transformTo(this.animationEle, oldX - newX, oldY - newY, time);
            this.onstart();
          }, 0);
        }
        getRect(ele) {
          return {
            x: ele.offsetLeft,
            y: ele.offsetTop,
          };
        }
        raf(callback) {
          requestAnimationFrame(() => {
            requestAnimationFrame(callback);
          });
        }
        transformTo(ele, offsetX, offsetY, time) {
          ele.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
          this.raf(() => {
            ele.style.transition = `transform ${time}ms`;
            ele.style.removeProperty("transform");
            setTimeout(() => {
              ele.style.transition = ``;
              this.onend();
            }, time);
          }, 0);
        }
        onstart() {
          this.playStatus = 'play'
          this._onstart()
        }
        _onstart() {}
        onend() {
          this.playStatus = 'stop'
          this._onend()
        }
        _onend() { }
        addEventListener(type, callback) {
          switch (type) {
            case "onstart":
              callback &&
                (this._onstart = () => {
                  callback();
                });
              break;
            case "onend":
              callback &&
                (this._onend = () => {
                  callback();
                });
              break;
          }
        }
      }
      var ul = document.querySelector("ul");
      var dragEle = null;
      ul.ondragstart = (e) => {
        // e.dataTransfer.dropEffect = "move"
        e.dataTransfer.effectAllowed = "move";
        setTimeout(() => {
          dragEle.classList.add("touch");
        }, 0);
        dragEle = e.target;
      };
      ul.ondragover = (e) => {
        e.preventDefault();
      };
      ul.ondragenter = (e) => {
        e.preventDefault();
        var enterEle = e.target;
        if (
          enterEle != ul &&
          enterEle != dragEle &&
          !enterEle.classList.contains("moveing")
        ) {
          const liList = [...ul.querySelectorAll("li")];
          var dragEleIndex = liList.findIndex((ele) => ele == dragEle);
          var enterEleIndex = liList.findIndex((ele) => ele == enterEle);
          const filp = new Filp(enterEle, 150);
          filp.addEventListener("onstart", () => {
            console.log(filp.playStatus)
            enterEle.classList.add("moveing");
          });
          filp.addEventListener("onend", () => {
            console.log(filp.playStatus)
            enterEle.classList.remove("moveing");
          });
          if (dragEleIndex > enterEleIndex) {
            ul.insertBefore(dragEle, enterEle);
          } else if (dragEleIndex < enterEleIndex) {
            ul.insertBefore(dragEle, enterEle.nextElementSibling);
          }
        }
      };
      ul.ondragend = () => {
        dragEle.classList.remove("touch");
        dragEle = null;
      };
    </script>
  </body>
</html>