利用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 {
            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>