原生js实现div拖拽+按下鼠标计时 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body{
                height:1200px;
                background-color: azure;
            }
            #drag{
                background-color: cornflowerblue;
                border: 1px solid black;
                position: absolute;
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="drag">
            
        </div>
        <script>
            //加入文字之后拖拽容易出现选中字后跳动bug
            var drag = document.getElementById("drag"),
                text = document.createTextNode("0"),
                flag ,
                time =0;
            drag.appendChild(text);
            drag.addEventListener("mousedown",dragDiv,false);
            function dragDiv(e){   
                flag = true;
                if(flag){
                    var handler = setInterval(function(){
                        time+=0.02;
                        drag.innerHTML =time.toFixed(2);      
                       
                        if(!flag){
                            clearInterval(handler);
                        }
                    },20)
                }
               
                var x=e.layerX||e.offsetX;  
                var y=e.layerY||e.offsetY;  
                document.addEventListener("mousemove",docMove,false);
                document.addEventListener("mouseup",function(){                
                    flag = false;
                },false);
                function docMove(e){             
                    if(flag){
                        e.preventDefault;
                         var l =parseInt(drag.style.left);
                         var t =parseInt(drag.style.top);                  
                         drag.style.left = -x+e.pageX+"px";
                         drag.style.top = -y+e.pageY +"px";
                        
                    } 
                }
            }
        </script>
    </body>    
</html>

 

posted on 2015-08-28 16:23  Leon·Vince  阅读(500)  评论(0)  编辑  收藏  举报

导航