m0_54087594
m0_54087594
2021-06-09 23:14
采纳率: 100%
浏览 18

用dom移除法把div拖拽到deldiv时自动删除

<!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>
        #outerdiv{width:100%;height:700px;background-color:rgb(247, 202, 201);}
        html,body{margin:0px;height: 100%;}
        #deldiv{width:400px;height:400px;background-color: rgb(135, 224, 175);top:300px;left:900px;position:absolute;}
    </style>
    <script>
        var text = '{ "pics" : [' +
	        '{ "name":" seventeen" , "url":"1.jpg" ,"works":"《不想哭》 《万岁》 《pretty u》"},' +
	        '{ "name":" hippop team" , "url":"2.jpg","works":"《表情管理》" },' +
            '{ "name":" performance team" , "url":"3.jpg" ,"works":"《247》"},' +
            '{ "name":" vocal team" , "url":"4.jpg" ,"works":"《风车》"}]}' ;
        </script>
</head>
<body>
    <div id="outerdiv"><div id="deldiv"></div></div>
    <script>
        var outerdiv=document.getElementById("outerdiv");
        var picArray=JSON.parse(text).pics;
        for(var i=0;i<picArray.length;i++)                         
        {
            var div=document.createElement("div");
            
            div.style.height="300px";
            div.style.width="150px";
            div.style.display="inline-block";
            div.style.margin="5px";
            div.style.backgroundColor="#92a8d1";
            div.style.position="absolute";
            div.style.top="0px";
            div.style.left="0px";
            var node1=document.createTextNode(picArray[i].name);
            div.appendChild(node1);
            var timg=document.createElement("img");
            timg.src=picArray[i].url;
            timg.style.width="150px";
            div.appendChild(timg);
            var node2=document.createTextNode(picArray[i].works);
            div.appendChild(node2);
            
            div.onmousedown=function (e){    
                console.log(e.clientX+" "+e.clientY);
                this.poX=this.offsetLeft;
                this.poY=this.offsetTop;
                this.downX=e.pageX;
                this.downY=e.pageY;
                var tdiv=this;
                outerdiv.onmousemove=function(e){
                    console.log(e.pageX+" "+e.pageY);
                    tdiv.style.left=e.pageX-tdiv.downX+tdiv.poX+"px";
                    tdiv.style.top=e.pageY-tdiv.downY+tdiv.poY+"px";
                    }
            }
            div.onmouseup=function (){
                outerdiv.onmousemove=null;
                if(div.style.left>=deldiv.downX+"px" && div.style.top>=deldiv.downY+"px"){
                    div.removeChild(timg);
                    div.removeChild(node1);
                }  
            }
            outerdiv.appendChild(div);
        }
    </script>   
</body>
</html>

试了好多次,真的快崩溃了。。。

  • 点赞
  • 收藏

1条回答 默认 最新

  • technologist_16
    已采纳
    <!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>
            #outerdiv{width:100%;height:700px;background-color:rgb(247, 202, 201);}
            html,body{margin:0px;height: 100%;}
            #deldiv{width:400px;height:400px;background-color: rgb(135, 224, 175);top:300px;left:900px;position:absolute;}
        </style>
        <script>
            var text = '{ "pics" : [' +
    	        '{ "name":" seventeen" , "url":"1.jpg" ,"works":"《不想哭》 《万岁》 《pretty u》"},' +
    	        '{ "name":" hippop team" , "url":"2.jpg","works":"《表情管理》" },' +
                '{ "name":" performance team" , "url":"3.jpg" ,"works":"《247》"},' +
                '{ "name":" vocal team" , "url":"4.jpg" ,"works":"《风车》"}]}' ;
            </script>
    </head>
    <body>
        <div id="outerdiv"><div id="deldiv"></div></div>
        <script>
            let deldiv = document.getElementById("deldiv");
            var outerdiv=document.getElementById("outerdiv");
            var picArray=JSON.parse(text).pics;
            for(var i=0;i<picArray.length;i++)                         
            {
                let div=document.createElement("div");
                div.style.height="300px";
                div.style.width="150px";
                div.style.display="inline-block";
                div.style.margin="5px";
                div.style.backgroundColor="#92a8d1";
                div.style.position="absolute";
                div.style.top="0px";
                div.style.left="0px";
                let node1=document.createTextNode(picArray[i].name);
                div.appendChild(node1);
                let timg=document.createElement("img");
                timg.src=picArray[i].url;
                timg.style.width="150px";
                div.appendChild(timg);
                let node2=document.createTextNode(picArray[i].works);
                div.appendChild(node2);
                div.onmousedown=function (e){    
                    console.log(e.clientX+" "+e.clientY);
                    this.poX=this.offsetLeft;
                    this.poY=this.offsetTop;
                    this.downX=e.pageX;
                    this.downY=e.pageY;
                    var tdiv=this;
                    outerdiv.onmousemove=function(e){
                        console.log(e.pageX+" "+e.pageY);
                        tdiv.style.left=e.pageX-tdiv.downX+tdiv.poX+"px";
                        tdiv.style.top=e.pageY-tdiv.downY+tdiv.poY+"px";
                        }
                }
                div.onmouseup=function (){
                    outerdiv.onmousemove=null;
                    let dp = this.getBoundingClientRect();
                    let delp = deldiv.getBoundingClientRect();
                    if(dp.left>=delp.left && dp.right<=delp.right && dp.top>=delp.top && dp.bottom<=delp.bottom){
                        outerdiv.removeChild(this);
                    }  
                }
                outerdiv.appendChild(div);
            }
        </script>   
    </body>
    </html>
    
    点赞 评论

相关推荐