js实现拖动排序

最新推荐文章于 2024-10-18 10:41:41 发布

白日梦想家.、

最新推荐文章于 2024-10-18 10:41:41 发布

阅读量576

点赞数

文章标签： javascript firefox safari

本文链接：https://blog.youkuaiyun.com/m0_65545080/article/details/130555486

版权

本文介绍了HTML5的拖放特性，包括如何启用拖放功能、拖动事件的分类及其触发时机，以及如何传递和处理拖放信息。通过示例代码展示了如何使用JavaScript和CSS实现元素的拖动排序效果，同时提供了在React组件中实现相同功能的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。

实现效果

js拖动排序

拖动事件
事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。
一.发生在拖动元素上的事件：

事件名 触发时机 触发次数
dragstart 当拖动开始时触发一次 1
drag 拖动开始后反复触发 n
dragend 拖动结束后触发一次

二.发生在目标元素上的事件

事件名 触发时机 触发次数
dragenter 当拖动元素进入目标时触发一次 1
dragover 当拖动元素在目标元素范围内时反复触发 n
drop 拖动元素在目标元素内释放时(在设置了dropover事件的前提下) 1

信息传递

在拖动元素时可以设置传递的信息
event.dataTransfer.setData(“te”, “sss);
两个参数，第一个参数key，第二个参数value。
注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。

注意：设置了dragover后drop才会触发！！

下面是html代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
           list-style: none;
           margin: 0;
           padding: 0;
       }

       #container{
           width: 500px;
           margin: 100px auto;
       }

        .ele {
            width:100%;
            height: 40px;
            border: 1px solid #999;
            background: cadetblue;
            margin-top: 2px;
            border-radius: 10px;
            padding-left: 10px;
            color: white;
            cursor: move;
        }
    </style>
</head>
<body>
<ul id="container">
    <li class="ele" draggable="true">1</li>
    <li class="ele" draggable="true">2</li>
    <li class="ele" draggable="true">3</li>
    <li class="ele" draggable="true">4</li>
</ul>
<script>
    var node = document.querySelector("#container");
    var draging = null;
    //使用事件委托，将li的事件委托给ul
    node.ondragstart = function(event) {
        //console.log("start");
        //firefox设置了setData后元素才能拖动！！！！
        //event.target出发事件的元素
        event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
        //event.dataTransfer.setData("self", event.target);
        draging = event.target;
        console.log(draging,'aaaa');
    }
    node.ondragover = function(event) {
        //console.log("onDrop over");
        //取消默认行为
        event.preventDefault();
        var target = event.target;
        //因为dragover会发生在ul上，所以要判断是不是li
        if (target.nodeName === "LI") {
            if (target !== draging) {
                //getBoundingClientRect()用于获取某个元素相对于视窗的位置集合
                var targetRect = target.getBoundingClientRect();
                var dragingRect = draging.getBoundingClientRect();
                if (target) {
                    if (target.animated) {
                        return;
                    }
                }
                if (_index(draging) < _index(target)) {
                    //nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。
                    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)) {
            //console.log(el);
            index++;
        }

        return index;
    }

    function _animate(prevRect, target) {
        var ms = 300;

        if (ms) {
            var currentRect = target.getBoundingClientRect();
           //nodeType 属性返回以数字值返回指定节点的节点类型。1=元素节点  2=属性节点
            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; // 触发重绘
            //放在timeout里面也可以
            // setTimeout(function() {
            //     _css(target, 'transition', 'all ' + ms + 'ms');
            //     _css(target, 'transform', 'translate3d(0,0,0)');
            // }, 0);
            _css(target, 'transition', 'all ' + ms + 'ms');
            _css(target, 'transform', 'translate3d(0,0,0)');

            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) {
                //使用DefaultView属性可以指定打开窗体时所用的视图
                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>
</body>
</html>

下面是在组件中的代码：

index.tsx

import React, { useEffect, useState } from 'react'
import './index.less'
export default function DragSotr() {

    const [list] = useState([
        { id: "1", name: "1" },
        { id: "2", name: "2" },
        { id: "3", name: "3" },
        { id: "5", name: "5" },
    ])
    useEffect(() => {
        // 获取dom节点
        let list = document.querySelector('.container')
        // 滑动dom
        let draging = null
        // 拖动开始
        list.ondragstart = function (event) {
            // console.log("。。。。", event.target);
            //dataTransfer专门用来存储拖放时要携带的数据
            //setData有两个参数：
            // 1.第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字
            // 2.第二个参数为要携带的数据
            event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox会打开新tab
            draging = event.target; //滑动新的节点
        }
        //获取元素在父元素中的index
        function _index(el) {
            var index = 0;
            if (!el || !el.parentNode) {
                return -1;
            }
            //previousElementSibling属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
            while (el && (el = el.previousElementSibling)) {
                index++;
            }
            return index;
        }
        //给元素添加style
        function _css(el, prop, val) {
            var style = el && el.style;
            if (style) {
                if (val === 0) {
                    //使用DefaultView属性可以指定打开窗体时所用的视图
                    if (document.defaultView && document.defaultView.getComputedStyle) {
                        val = document.defaultView.getComputedStyle(el, '');
                    } else if (el.currentStyle) {
                        val = el.currentStyle;
                    }
                    return prop === 0 ? val : val[prop];
                } else {
                    if (!(prop in style)) {
                        prop = '-webkit-' + prop;
                    }
                    style[prop] = val + (typeof val === 'string' ? '' : 'px');
                }
            }
        }
        //滑动
        function _animate(prevRect, target) {
            var ms = 300;
            if (ms) {
                var currentRect = target.getBoundingClientRect();
                //nodeType 属性返回以数字值返回指定节点的节点类型。1=元素节点  2=属性节点
                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; // 触发重绘
                //放在timeout里面也可以
                // setTimeout(function() {
                //     _css(target, 'transition', 'all ' + ms + 'ms');
                //     _css(target, 'transform', 'translate3d(0,0,0)');
                // }, 0);
                _css(target, 'transition', 'all ' + ms + 'ms');
                _css(target, 'transform', 'translate3d(0,0,0)');

                clearTimeout(target.animated);
                target.animated = setTimeout(function () {
                    _css(target, 'transition', '');
                    _css(target, 'transform', '');
                    target.animated = false;
                }, ms);
            }
        }

        list.ondragover = function (event) {
            //取消默认行为
            event.preventDefault();
            var target = event.target;
            //因为dragover会发生在ul上，所以要判断是不是li
            if (target.nodeName === "LI") {
                if (target !== draging) {
                    //getBoundingClientRect()用于获取某个元素相对于视窗的位置集合
                    var targetRect = target.getBoundingClientRect();
                    var dragingRect = draging.getBoundingClientRect();
                    if (target) {
                        if (target.animated) {
                            return;
                        }
                    }
                    if (_index(draging) < _index(target)) {
                        //nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。
                        target.parentNode.insertBefore(draging, target.nextSibling);
                    } else {
                        target.parentNode.insertBefore(draging, target);
                    }
                    _animate(dragingRect, draging);
                    _animate(targetRect, target);
                }
            }
        }
    }, [])
    return (
        <ul className="container">
            {/* <li className="ele" draggable="true">1</li>
            <li className="ele" draggable="true">2</li>
            <li className="ele" draggable="true">3</li>
            <li className="ele" draggable="true">4</li> */}
            {
                list.map((item, index) => {
                    return <li className="ele" draggable="true" key={index}>{item.name}</li>
                })
            }
        </ul>
    )
}

index.less

.container {
    height: 100vh;
    list-style: none;
    .ele {
        width: 100px;
        height: 10px;
        background: cadetblue;
        margin-top: 2px;
        color: white;
        cursor: move;
        line-height: 10px;
        text-align: center;
    }
}