我放弃了，这边界太难弄了

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{width: 50px;height: 50px;background-color: red;margin: 20px auto;position: absolute;}

.background{width: 100%;height: 2000px;background-color: pink;position: relative;}

</style>

</head>

<body>

</div>

var drag = function(el,direction){

if(direction.x !== undefined && direction.y !== undefined){

if(!direction.x || !direction.y){

return;

}else{

var curpoint = {x:0,y:0};

var startpoint = {x:0,y:0}

function move(el,transl){

x = transl.x || 0;

y = transl.y || 0;

el.style.left = x+'px';

el.style.top = y+'px';

}

function Limit(el,transl){

if(el.offsetLeft<=0||(el.offsetLeft+el.offsetWidth)>=window.innerWidth){transl.x=0}

if(el.offsetTop<0||(el.offsetTop+el.offsetHeight)>window.innerHeight){transl.y=0}

}

el.addEventListener('touchstart',changestart,false);

el.addEventListener('touchmove',changemove,false);

el.addEventListener('touchend',changeend,false);

function changestart(e){

var touchdata = e.changedTouches[0];

startpoint.x = touchdata.pageX;

startpoint.y = touchdata.pageY;

}

function changemove(e){

var diffent = {x:0,y:0};

var movepoiont = {x:0,y:0};

e.preventDefault();

var touchdata = e.changedTouches[0];;

diffent.x = touchdata.pageX-startpoint.x;

diffent.y = touchdata.pageY-startpoint.y;

if(direction.x == true){movepoiont.x = diffent.x+curpoint.x;}

if(direction.y == true){movepoiont.y = diffent.y+curpoint.y;}

Limit(el,movepoiont);

move(el,movepoiont);

var vw = window.innerWidth;

var vh = window.innerHeight;

console.log(vw,vh)

console.log(el.offsetLeft,el.offsetTop)

console.log(movepoiont.x,movepoiont.y)

}

function changeend (e){

var touchdata = e.changedTouches[0];

curpoint.x += touchdata.pageX - startpoint.x;

curpoint.y += touchdata.pageY - startpoint.y;

}

function changestart (e){

var touchdata = e.changedTouches[0];

ts.innerHTML = 'touch开始得位置:'+touchdata.pageX+'.'+touchdata.pageY;

}

function changemove (e){

var touchdata = e.changedTouches[0];

tm.innerHTML = 'touch当前得位置:'+touchdata.pageX+'.'+touchdata.pageY;

}

</script>

var box = document.getElementById('box');

var boxmove = {x:true,y:true}

drag(box,boxmove);

</script>

</body>

</html>

老师看看到底是怎么回事？1）到了边界不是不动而是疯狂闪烁，我以为是offsetleft是0的时候，movepointx也恒为0就好了，事实上并不是这样 2）感觉根本没法精准确认哪个位置才是边界？不是左边就是offset为0吗，右边界根本没法算出来，上下同理了，浪费了我一下午时间，都没弄出来，真闹心

慕雪9296518 2020-06-19

源自：移动端事件 2-7 自由编程

收起

4回答

好帮手慕慕子 2020-06-22 11:03:47

同学你好，document.documentElement.getBoundingClientRect().height是获取页面的高度，也就是body的高度2000px，但同学想要实现的是将方块现在在窗口区域内，那么就不能使用页面高度来计算你，所以需要通过window.innerHeight获取窗口的高度来计算

祝学习愉快~

收起回答

好帮手慕慕子 2020-06-22 09:37:47

同学你好，获取当前窗口的大小是通过window.innerWidth获取的，需要去掉盒子的外边距，并将盒子修改为固定定位，老师这里以同学最开始粘贴的代码进行修改，具体代码如下，同学可以测试理解下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: red;
            /* margin: 20px auto; */
            /* position: absolute; */
            position: fixed;
        }
        .background {
            width: 100%;
            height: 2000px;
            background-color: pink;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="background">
        <div class="box" id="box"></div>
    </div>
    <script>
        var drag = function (el, direction) {
            if (direction.x !== undefined && direction.y !== undefined) {
                if (!direction.x || !direction.y) {
                    return;
                } else {
                    var curpoint = { x: 0, y: 0 };
                    var startpoint = { x: 0, y: 0 }
                    function move(el, transl) {
                        x = transl.x || 0;
                        y = transl.y || 0;
                        el.style.left = x + 'px';
                        el.style.top = y + 'px';
                    }
                    function Limit(el, transl) {
                        // var viewportX = document.documentElement.getBoundingClientRect().width || window.innerWidth,
                        //     viewportY = document.documentElement.getBoundingClientRect().height || window.innerHeight;
                       var viewportX = window.innerWidth
                       var viewportY = window.innerHeight
                        var limitX = viewportX - el.offsetWidth;
                        var limitY = viewportY - el.offsetHeight;
                        if (transl.x >= limitX) {
                            transl.x = limitX;
                        } else if (transl.x < 0) {
                            transl.x = 0;
                        }
                        if (transl.y >= limitY) {
                            transl.y = limitY;
                        } else if (transl.y < 0) {
                            transl.y = 0;
                        }
                    }
                    // if (el.offsetLeft <= 0 || (el.offsetLeft + el.offsetWidth) >= window.innerWidth) { transl.x = 0 }
                    // if (el.offsetTop < 0 || (el.offsetTop + el.offsetHeight) > window.innerHeight) { transl.y = 0 }
                }
                el.addEventListener('touchstart', changestart, false);
                el.addEventListener('touchmove', changemove, false);
                el.addEventListener('touchend', changeend, false);
                function changestart(e) {
                    var touchdata = e.changedTouches[0];
                    startpoint.x = touchdata.pageX;
                    startpoint.y = touchdata.pageY;
                }
                function changemove(e) {
                    var diffent = { x: 0, y: 0 };
                    var movepoiont = { x: 0, y: 0 };
                    e.preventDefault();
                    var touchdata = e.changedTouches[0];;
                    diffent.x = touchdata.pageX - startpoint.x;
                    diffent.y = touchdata.pageY - startpoint.y;
                    if (direction.x == true) { movepoiont.x = diffent.x + curpoint.x; }
                    if (direction.y == true) { movepoiont.y = diffent.y + curpoint.y; }
                    Limit(el, movepoiont);
                    move(el, movepoiont);
                    var vw = window.innerWidth;
                    var vh = window.innerHeight;
                    console.log(vw, vh)
                    console.log(el.offsetLeft, el.offsetTop)
                    console.log(movepoiont.x, movepoiont.y)
                }
                function changeend(e) {
                    var touchdata = e.changedTouches[0];
                    curpoint.x += touchdata.pageX - startpoint.x;
                    curpoint.y += touchdata.pageY - startpoint.y;
                }
            }
        }
        function changestart(e) {
            var touchdata = e.changedTouches[0];
            ts.innerHTML = 'touch开始得位置:' + touchdata.pageX + '.' + touchdata.pageY;
        }
        function changemove(e) {
            var touchdata = e.changedTouches[0];
            tm.innerHTML = 'touch当前得位置:' + touchdata.pageX + '.' + touchdata.pageY;
        }
    </script>
    <script>
        var box = document.getElementById('box');
        var boxmove = { x: true, y: true }
        drag(box, boxmove);
    </script>
</body>
</html>

祝学习愉快~

收起回答

提问者慕雪9296518 #1

viewportY =document.documentElement.getBoundingClientRect().height ||window.innerHeight;这句话又出问题吗

2020-06-22 10:08:09

好帮手慕慕子 2020-06-20 09:51:21

同学你好，对于你的问题解答如下：

因为body默认有8px的外间距，所以导致上下有间隙，直接使用通配符去除所有的默认的内外间距就可以了
因为同学给body设置的高度为2000px，页面存在滚动条，所以需要将页面滚动到底部测试垂直方向的边界限制情况
下图所示，同学是想要实现将方块限制在当前窗口吗？
如果这样的话，可以将老师第一次回复给出的解决方案中，将获取外层盒子的大小换成浏览器当前窗口的大小，然后将方块调整成固定定位就可以了。示例：

同学可以结合代码自己测试下，如果不是指这里，可以详细描述下具体想要实现什么效果，便于帮助同学准确的定位与解决问题

祝学习愉快~

收起回答

提问者慕雪9296518 #1

var viewportX =document.documentElement.getBoundingClientRect().width ||window.innerWidth, viewportY =document.documentElement.getBoundingClientRect().height ||window.innerHeight; var limitX = viewportX - el.offsetWidth; var limitY = viewportY - el.offsetHeight; if(direction.x == true){ movepoiont.x = diffent.x+curpoint.x; if(movepoiont.x>=limitX){ movepoiont.x = limitX; }else if (movepoiont.x < 0) { movepoiont.x = 0;} } if(direction.y == true){ movepoiont.y = diffent.y+curpoint.y; if(movepoiont.y>=limitY){ movepoiont.y = limitY; }else if (movepoiont.y < 0) { movepoiont.y = 0;} } move(el,movepoiont); } 这边我就是这样改的，还是可以到最底部

2020-06-22 09:08:24