利用H5新特性实现拖拽

<!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 {
             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

相关阅读:
C# 利用Autofac批量接口注入依赖【学习记录】
c# Quartzs定时器的简单使用
 Web Api 宿主的搭建
 教你如何搭建自己的直播服务器简易
 自用电脑+外网开放+SSL认证（纯免费）
sql 获取主键表和主键的方法
 sql 分裂字符串函数
 Sql 将一个整型数字转换成带前导零的固定长度数字字符串
 sql 根据外键表和外键列得到主键表和主键列的方法
 定位div
原文地址：https://www.cnblogs.com/guozhe/p/16159585.html