js拖拽效果 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在当前显示区范围内实现点不到的小方块</title>
        <style>
            div {
                position: fixed;
                width: 100px;
                height: 100px;
                top: 200px;
                left: 300px;
                background-image: url(images/xiaoxin.gif);
                background-size: 100%;
            }
        </style>

    </head>
    <body>
        <div id="pop"></div>
        <script>
            var pop=document.getElementById("pop");
            // pop.onclick=function(e){
            //     // 浏览器显示区
            //     console.log(`e.screenX:${e.screenX},e.screenY:${e.screenY}`)
            //     // 文档显示区
            //     console.log(`e.clientX:${e.clientX},e.clientY:${e.clientY}`)
            //     // div显示区
            //     console.log(`e.offsetX:${e.offsetX},e.offsetY:${e.offsetY}`)
            // }
            
            
            var canMove=false;//默认不允许拖拽
            var offsetX,offsetY;//在移动过程中保持记录鼠标相对于当前元素左上角的坐标
            // 当鼠标左键在图片上按下时,允许图片可以拖拽
            pop.onmousedown=function(e){
                canMove=true;
                // 获取鼠标相对于与当前div左上角的位置，备用
                offsetX=e.offsetX;
                offsetY=e.offsetY;
            }
            // 当鼠标在文档显示区范围内移动时
            document.body.onmousemove=function(e){
                // 如果允许拖拽
                if(canMove){
                    var x=e.clientX;
                    var y=e.clientY;
                    // 才根据鼠标位置，计算出图片新位置，并移动图片
                    var left=x-offsetX;
                    var top=y-offsetY;
                    // pop.style.cssText=`top:${top}px`
                    if(left<0){
                        left=0;
                    }else if(left>innerWidth-100){
                        top=innerHeight-100;
                        
                    }
                    pop.style.left=left+'px';
                    pop.style.top=top+'px';
                }
            }
            // 当鼠标左键在图片上抬起时,不在允许图片可拖拽
            pop.onmouseup=function(){
                canMove=false;
            }
        </script>
    </body>
</html>

 

posted @ 2020-11-11 10:06  平安喜乐、愿  阅读(95)  评论(0)    收藏  举报