day9作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                position: fixed;    
            }   
            body{
                width: 10000px;
                height: 10000px;
                position: fixed;
            }       
            #big{
                height: 400px;
                width: 400px;
                background-color: #FF7F50;
            }
            #small{
                height: 100px;
                width: 200px;
                background-color: #5F9EA0;  
            }
            #middle{
                height: 200px;
                width: 300px;
                background-color: burlywood;
            }
        </style>
    </head>
    <body id="container">
            <div id="big"></div>
            <div id = "middle"></div>
            <div id="small" ></div> 
        <script type="text/javascript">
            var divs = document.querySelectorAll("div");
            var body = document.getElementById("container");
            
            body.addEventListener("mouseup",function(){
                for(var i = 0;i<divs.length;i++ ){
                    divs[i].start = false;
                }
            })
            function stop(evt){
                    var div = evt.target;
                    div.start = false;
                    div.stopPropagation;        
                }
            function moveIt(div,evt){
                    var x = evt.clientX;
                    var y = evt.clientY;
//                  div.x;div.y是上一次代表的位置
                    var currentStyle = document.defaultView.getComputedStyle(div);
                    var newX = parseInt(currentStyle.left)+(x-div.x);
                    var newY = parseInt(currentStyle.top)+(y-div.y);
//                  currentStyle.left 是div 的left;
//                  x-div.x是鼠标位移的距离
//                  newX,newY是新的div位置
                    if (newX<0||newY<0) return;
                    div.style.left = newX+"px";
                    div.style.top = newY+"px";
//                  更新div.x;div.y
                    div.x = x;
                    div.y = y;
                }
            for(var i = 0;i<divs.length;i++){
                divs[i].addEventListener("mousedown",function(evt){
                    var div = evt.target;
                    div.start = true;
                    div.x = evt.clientX
                    div.y = evt.clientY
                    div.stopPropagation;
                })
                
                divs[i].addEventListener("mouseup",stop);
                
                divs[i].addEventListener("mouseout",function(evt){
                    var div = evt.target;
                    if (!div.start) return;
                    body.addEventListener("mousemove",function(evtB){
                        if (!div.start) return;
                        moveIt(div,evtB);
                    })
                });
                
                divs[i].addEventListener("mousemove",function(evt){
                    var div = evt.target;
                    if (!div.start) return;
                    moveIt(div,evt);
                    div.stopPropagation;
                })
            }
        </script>
    </body>
</html>
day9作业

推荐阅读更多精彩内容
