m0_54087594 2021-06-09 23:14 采纳率: 100%
浏览 19
已结题

用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条回答 默认 最新

  • CSDN专家-天际的海浪 2021-06-10 03:59
    关注
    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 unity terrain打包后地形错位，跟建筑不在同一个位置，怎么办
  • ¥15 FileNotFoundError 解决方案
  • ¥15 uniapp实现如下图的图表功能
  • ¥15 u-subsection如何修改相邻两个节点样式
  • ¥30 vs2010开发 WFP（windows filtering platform）
  • ¥15 服务端控制goose报文控制块的发布问题
  • ¥15 学习指导与未来导向啊
  • ¥15 求多普勒频移瞬时表达式
  • ¥15 如果要做一个老年人平板有哪些需求
  • ¥15 k8s生产配置推荐配置及部署方案