老师，我不会限定他的边界，要怎么做？可以教教我吗？

老师，我不会限定他的边界，要怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
            left: 20px;
            top: 20px;
        }
        body{
            height: 2000px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box" class="box"></div>
    
    <script>
        var boxEI = document.getElementById('box');
        boxEI.addEventListener('touchstart',handleStart,false);
        boxEI.addEventListener('touchmove',handleMove,false);
        boxEI.addEventListener('touchend',handleEnd,false);

        var currentPos = {
                x:0,
                y:0
            },
            distance = {},
            currentPage = {},
            targetPage = {};

        function handleStart(ev){
            var touch = ev.changedTouches[0];
            // get start pos
            currentPage.x = touch.pageX;
            currentPage.y = touch.pageY;
        }
        function handleMove(ev){
            var touch = ev.changedTouches[0];
            // get end pos
            targetPage.x = touch.pageX;
            targetPage.y = touch.pageY;
            // caculate distance
            distance.x = targetPage.x - currentPage.x;
            distance.y = targetPage.y - currentPage.y;
            // move
            move(this, distance.x+currentPos.x, distance.y+currentPos.y);
        }
        function handleEnd(ev){
            currentPos.x += distance.x;
            currentPos.y += distance.y;
        }
        function move(el, x, y){
            el.style.transform = "translate3d("+ x + "px," + y + "px, 0)";
        }
    </script>
</body>
</html>

本位 2019-06-18

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