原生js实现div拖拽

时间：2015-08-28 13:11:05 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：

十分简单的效果。

<!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: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="drag">
            
        </div>
        <script>
            //加入文字之后拖拽容易出现选中字后跳动bug
            var drag = document.getElementById("drag"),
                flag ;
            drag.addEventListener("mousedown",dragDiv,false);
            function dragDiv(e){   
                flag = true;
                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";
                         console.log(drag);
                    } 
                }
            }
        </script>
    </body>    
</html>

原生js实现div拖拽

标签：

原文地址：http://www.cnblogs.com/VinceLeon/p/4765960.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行