原生JS实现鼠标拖动DIV

已被阅读 1289 次 | 文章分类:javascript | 2018-06-03 20:19

用JS实现可以在窗口内拖动DIV,其基本原理借助onmousedown、onmouseover、onmouseup事件实现交互

一:实现基本原理

实现的基本思路很简单,需将DIV的position属性设置为absolute,主要以下三步:

1.鼠标点击DIV执行onmousedown事件,激活拖动状态并且记录DIV的初始位置(DIV.offsetLeft,DIV.offsetY)和鼠标初始位置(e.pageX,e.pageY)

2.鼠标按下且移动时执行onmouseover事件,记录鼠标位置,和鼠标初始位置实时相减计算移动距离,DIV初始位置加上移动距离作为DIV的最后位置

3.鼠标松开执行onmouseup事件,禁止拖动状态

二:实例

                                            
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .move{
            width:400px;height:400px;
            margin:0 auto;
            border:1px solid red;
            position: absolute;left:200px;top:200px;
        }
        .move_header{
            height:50px;line-height:50px;
            text-align: center;background-color: peru;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id=move>
        <div id="move_header_js">
            拖曳
        </div>
        <div>
            内容
        </div>
                       

    </div>
<script>
    function get(id)
    {
         return document.getElementById(id);
         }
                       

</script>
<script>
    var mouseoffsetX=0;
    var mouseoffsetY=0;
    var startX=0;
    var startY=0;
    var isDraging=false;
    get("move_header_js").addEventListener("mousedown",function(e){
        var e=e||window.event;
        startX=get("move").offsetLeft,
        startY=get("move").offsetTop;
        mouseoffsetX=e.pageX-startX;//鼠标初始位置
        mouseoffsetY=e.pageY-startY;
        isDraging=true;
    })
    document.onmousemove=function(){
        var e=e||window.event;
        var movex=0;
        var movey=0;
        if(isDraging==true){
            moveX=e.pageX-startX-mouseoffsetX;//鼠标移动位移
            moveY=e.pageY-startY-mouseoffsetY;
            endX=moveX+startX;
            endY=moveY+startY;
            get("move").style.left=endX+"px";
            get("move").style.top=endY+"px"
            console.log(moveX,moveY)
        }
    }
    document.onmouseup=function(){
        isDraging=false;
    }
</script>
</body>
</html>
                                            
                                        

三:效果

/net/upload/image/20180603/6366365357404378289885357.gif

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号