利用H5新特性实现拖拽

最新推荐文章于 2024-04-09 22:11:07 发布

xiaoshengjinbu

最新推荐文章于 2024-04-09 22:11:07 发布

阅读量256

点赞数

文章标签： vue js javascript html dom

本文链接：https://blog.csdn.net/xiaoshengjinbu/article/details/124263963

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        .content {
            border: solid 1px red;
        }

        .content>.item {
            border: solid 1px red;
        }

        .item>.title {
            background-color: aqua;
        }

        .item>.list>ul>li:nth-child(1) {
            background-color: brown;
        }

        .item>.list>ul>li:nth-child(2) {
            background-color: bisque;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            console.log('开始');
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            console.log('结束');
            console.log(ev);
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            console.log(data);
            console.log(ev.target.attributes['dragoverid'].nodeValue);
            // 获取拖拽追加DOM的id
            let _targetId = ev.target.attributes['dragoverid'].nodeValue;
            // 把拖拽的DOM放在指定目标DOM下
            document.getElementById(_targetId).appendChild(document.getElementById(data))
            // ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>

    <ul class="content">
        <li class="item" dragoverId="dragAddLi1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="title" dragoverId="dragAddLi1">1</div>
            <div class="list" dragoverId="dragAddLi1">
                <ul id="dragAddLi1">
                    <li draggable="true" dragoverId="dragAddLi1" ondragstart="drag(event)" id="li1">11</li>
                    <li draggable="true" dragoverId="dragAddLi1" ondragstart="drag(event)" id="li2">12</li>
                </ul>
            </div>
        </li>
        <li class="item" dragoverId="dragAddLi2" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="title" dragoverId="dragAddLi2">2</div>
            <div class="list" dragoverId="dragAddLi2">
                <ul id="dragAddLi2">
                    <li draggable="true" dragoverId="dragAddLi2" ondragstart="drag(event)" id="li3">21</li>
                    <li draggable="true" dragoverId="dragAddLi2" ondragstart="drag(event)" id="li4">22</li>
                </ul>
            </div>

        </li>
    </ul>
</body>

</html>

参考资料链接：https://www.runoob.com/html/html5-draganddrop.html

xiaoshengjinbu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用H5新特性实现拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
复制链接

扫一扫