拖拽排序的实现示例demo

拖拽排序的实现示例demo

文章说明

文章主要为了学习拖拽排序的实现思路,并且采用此示例效果来进一步理解Flip动画的使用
参考渡一前端袁老师的讲解视频

核心代码

页面源码,拖拽排序的实现代码并不复杂,但是可以很好的帮助学习该示例的实现思路和拖拽API的使用

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>拖拽排序</title>
        <style>
            * {
                box-sizing: border-box;
            }

            .container {
                margin: 100px auto auto;
                width: 200px;
            }

            .container div {
                height: 30px;
                line-height: 30px;
                margin: 10px 0;
                background-color: chocolate;
                border-radius: 10px;
                color: #ffffff;
                text-align: center;
            }

            .container .moving {
                border: dashed 1px black;
                background-color: #ffffff;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div draggable="true" class="item">1</div>
            <div draggable="true" class="item">2</div>
            <div draggable="true" class="item">3</div>
            <div draggable="true" class="item">4</div>
            <div draggable="true" class="item">5</div>
            <div draggable="true" class="item">6</div>
        </div>

        <script src="flip.js"></script>
        <script>
            const container = document.getElementsByClassName("container")[0];
            let dragElem = null;
            let flip;

            container.ondragstart = function (e) {
                flip = new Flip(container.children, 0.5);
                dragElem = e.target;
                setTimeout(() => {
                    e.target.classList.add("moving");
                }, 0);
            }

            container.ondragover = function (e) {
                e.preventDefault();
            }

            container.ondragend = function (e) {
                e.target.classList.remove("moving");
            }

            container.ondragenter = function (e) {
                e.preventDefault();
                if (e.target === container || dragElem === e.target) {
                    return;
                }
                const children = [...container.children];
                const sourceIndex = children.indexOf(dragElem);
                const targetIndex = children.indexOf(e.target);
                if (sourceIndex > targetIndex) {
                    container.insertBefore(dragElem, e.target);
                } else {
                    container.insertBefore(dragElem, e.target.nextElementSibling);
                }
                flip.play();
            }
        </script>
    </body>
</html>

Flip工具类

javascript 复制代码
class Flip {
    children = null;
    delay = 0;

    constructor(children, delay = 1) {
        this.children = children;
        this.calculatePos();
        this.delay = delay;
    }

    calculatePos(name = "first") {
        const children = this.children;
        for (let i = 0; i < children.length; i++) {
            children[i][name] = children[i].getBoundingClientRect();
        }
    }

    play() {
        this.calculatePos("last");
        const children = this.children;
        for (let i = 0; i < children.length; i++) {
            const first = children[i]["first"];
            const last = children[i]["last"];
            if (first.x !== last.x || first.y !== last.y) {
                children[i].style.transform = `translateY(${first.y - last.y}px) translateX(${first.x - last.x}px)`;
                setTimeout(() => {
                    children[i].style.transition = `transform ${this.delay}s`;
                    children[i].style.removeProperty("transform");
                    setTimeout(() => {
                        children[i].style.removeProperty("transition");
                        this.calculatePos();
                    }, this.delay * 1000);
                }, 0);
            }
        }
    }
}

示例效果展示

拖拽功能展示

相关推荐
Trust yourself2439 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统20 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead34 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm