JavaScript中的拖拽效果_javascript window.innerwith 无拖拽条-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/105264329

本文介绍了一种使用JavaScript实现的交互技术，让网页上的div元素能够跟随鼠标位置进行拖拽移动，并保持在页面可视范围内。通过监听鼠标事件，计算div的新位置，同时设置边界值确保元素不会移出屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽鼠标，让div出现在鼠标所在的位置上

 var oDiv = document.querySelector('div');

        // 在div移动之前,先记录原始的定位数据
        var oldTop = window.getComputedStyle(oDiv).top;
        var oldLeft = window.getComputedStyle(oDiv).left;

        // 当鼠标按下时,鼠标移动,添加事件
        window.onmousedown = function(){
            window.onmousemove = function(e){
                // 将鼠标的坐标作为div定位的数值,定位的是中心的位置
                oDiv.style.left = e.clientX - oDiv.offsetWidth/2  + 'px' ;
                oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
            }
        }

        // 当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了
        window.onmouseup = function(){
            window.onmousemove = null;
            // 可以再给div定义定位位置,可以返回原始位置，也在函数之外记录存储原始位置
            oDiv.style.left = oldLeft;
            oDiv.style.top = oldTop;
        }

增加一个边界值效果，鼠标移动出页面，但是div要留在页面范围内
给定位数值添加极限范围数值，定位的最大值最小值都要有范围

先了解可视窗口的宽度和高度
情况1：包括滚动条的宽度高度，包含有滚动条宽度高度
window.innerHeight 高度
window.innerWidth 宽度
情况2：不包括滚动条宽度高度
document.documentElement.clientHeight 高度
document.documentElement.clientWidth 宽度

console.log(window.innerHeight);
console.log(document.documentElement.clientHeight);

var oDiv = document.querySelector('div');

        var oldTop = window.getComputedStyle(oDiv).top;
        var oldLeft = window.getComputedStyle(oDiv).left;

        // 视窗窗口的宽度,高度
        var winWidth = document.documentElement.clientWidth;
        var winHeight = document.documentElement.clientHeight;

        // 当鼠标按下时,鼠标移动,添加事件
        window.onmousedown = function(){
            window.onmousemove = function(e){
                // 根据 鼠标坐标,根据项目需求,计算定位的数值
                var x = e.clientX - oDiv.offsetWidth/2;
                var y = e.clientY - oDiv.offsetHeight/2;

                // 极限值判断
                // 最小值都是 0 0 
                if(x < 0){
                    x = 0;
                }

                if(y < 0){
                    y = 0;
                }

                // 最大值 可视窗口的宽度/高度 - ( 标签x轴方向 / y轴方向 最终占位 )

                if(x > winWidth - oDiv.offsetWidth){
                    x = winWidth - oDiv.offsetWidth;
                }

                if(y > winHeight - oDiv.offsetHeight){
                    y = winHeight - oDiv.offsetHeight;
                }
                console.log(x,y);
                // 将数值作为标签定位的坐标
                oDiv.style.left = x  + 'px' ;
                oDiv.style.top =  y + 'px' ;
            }
        }

        window.onmouseup = function(){
            window.onmousemove = null;
        }