今天给大家讲一些JS的东西,同时也是我们日常看到的APP当中很常见的一个模块,拖拽标题

本文链接：https://blog.csdn.net/qq_40317838/article/details/78047568

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .haha{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #000000;
        }
        ul li{
            list-style: none;
            border: 1px solid black;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .haha1{
            padding-left: 600px;
            float: left;
        }
    </style>
</head><body>
    <div class="haha">
        <ul id="ull">

        </ul>
    </div>
    <div class="haha1">
        <button data_type="yw">语文</button>
        <button data_type="sx">数学</button>
        <button data_type="yy">英语</button>
        <button data_type="wl">物理</button>
        <button data_type="hx">化学</button>
        <button data_type="sw">生物</button>
    </div>
    <script>
        var ull=document.getElementById("ull");
        var button=document.getElementsByTagName("button");
        for(var i=0;i<button.length;i++){
            button[i].onclick=function () {
                var num=false;
                var nli=document.createElement("li");
                nli.innerHTML=this.innerHTML+"<span>✖</span>";
                var type=this.getAttribute("data_type");
                console.log(type);
                nli.setAttribute("data_type",type);
                var lii=ull.getElementsByTagName("li");
                for(var i=0;i<lii.length;i++){
                    if (lii[i].getAttribute("data_type")==this.getAttribute("data_type")){
                        num=true;
                        break;
                    }else {
                        num=false;
                    }
                }
                if(num==false){
                    ull.append(nli);
                }
                var sp=nli.getElementsByTagName("span")[0];
                sp.onclick=function () {
                    ull.removeChild(sp.parentNode);
                }
            }
        }
    </script>
</body>
</html>