拖拽排序 

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>拖拽排序</title>
    <style>
        ul {
            list-style: none;
            margin: 200px;
            font-size: 0;
        }

        .ele {
            font-size: 16px;
            width: 100px;
            height: 40px;
            border: 1px solid #999;
            background: #EA6E59;
            margin: 2px 0;
            border-radius: 10px;
            padding-left: 10px;
            color: white;
            cursor: move;
        }
    </style>
</head>

<body>

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <link rel="stylesheet" href="./index.css">
        <script type="text/javascript" src="./index.js" defer></script>
        <title>Document</title>
    </head>

    <body>
        <div>
            <ul id="container">
                <li class="ele" draggable="true"><div>1</div></li>
                <li class="ele" draggable="true">2</li>
                <li class="ele" draggable="true">3</li>
                <li class="ele" draggable="true">4</li>
                <li class="ele" draggable="true">5</li>
                <li class="ele" draggable="true">6</li>
                <li class="ele" draggable="true">7</li>
                <li class="ele" draggable="true">8</li>
            </ul>
        </div>
    </body>

    </html>
</body>

</html>
<script>
    var node = document.querySelector("#container")
    var draging = null
    node.ondragstart = function (event) {
        console.log("start:")
        // dataTransfer.setData把拖动对象的数据存入其中，可以用dataTransfer.getData来获取数据
        event.dataTransfer.setData("te", event.target.innerText)
        draging = event.target
    }
    node.ondragover = function (event) {
        console.log("over:")
        // 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式
        event.preventDefault()
        var target = event.target
        if (target.nodeName === "LI" && target !== draging) {
            // 获取初始位置
            var targetRect = target.getBoundingClientRect()
            var dragingRect = draging.getBoundingClientRect()
            if (target) {
                // 判断是否动画元素
                if (target.animated) {
                    return;
                }
            }
            if (_index(draging) < _index(target)) {
                // 目标比元素大，插到其后面
                // extSibling下一个兄弟元素
                target.parentNode.insertBefore(draging, target.nextSibling)
            } else {
                // 目标比元素小，插到其前面
                target.parentNode.insertBefore(draging, target)
            }
            _animate(dragingRect, draging)
            _animate(targetRect, target)
        }
    }
    // 获取元素在父元素中的index
    function _index(el) {
        var index = 0
        if (!el || !el.parentNode) {
            return -1
        }
        // previousElementSibling：上一个兄弟元素
        while (el && (el = el.previousElementSibling)) {
            index++
        }
        return index
    }
    // 触发动画
    function _animate(prevRect, target) {
        var ms = 300
        if (ms) {
            var currentRect = target.getBoundingClientRect()
            if (prevRect.nodeType === 1) {
                prevRect = prevRect.getBoundingClientRect()
            }
            _css(target, 'transition', 'none')
            _css(target, 'transform', 'translate3d(' +
                (prevRect.left - currentRect.left) + 'px,' +
                (prevRect.top - currentRect.top) + 'px,0)'
            );

            target.offsetWidth; // 触发重绘

            _css(target, 'transition', 'all ' + ms + 'ms');
            _css(target, 'transform', 'translate3d(0,0,0)');
            // 事件到了之后把transition和transform清空
            clearTimeout(target.animated);
            target.animated = setTimeout(function () {
                _css(target, 'transition', '');
                _css(target, 'transform', '');
                target.animated = false;
            }, ms);
        }
    }
    // 给元素添加style
    function _css(el, prop, val) {
        var style = el && el.style
        if (style) {
            if (val === void 0) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    val = document.defaultView.getComputedStyle(el, '')
                } else if (el.currentStyle) {
                    val = el.currentStyle
                }
                return prop === void 0 ? val : val[prop]
            } else {
                if (!(prop in style)) {
                    prop = '-webkit-' + prop;
                }
                style[prop] = val + (typeof val === 'string' ? '' : 'px')
            }
        }
    }
</script>

 

posted on 2022-09-23 13:44  马玉豪  阅读(67)  评论(0)    收藏  举报

导航