js实现一个小的div在一个大的div的范围内拖动

HTML：

<div id="container">

        <div id="box"></div>

 </div>

CSS：

 #container {

            width: 500px;

            height: 500px;

            border: 3px solid red;

            position: relative;

        }

        #box {

            width: 100px;

            height: 100px;

            background-color: rgb(59, 149, 227);

            position: absolute;

        }

<script>

 var moves = document.getElementById('box')

        var x, y

        moves.onmousedown = function (event) {

            x = event.offsetX

            y = event.offsetY

            document.addEventListener('mousemove', moveS)

            document.addEventListener('mouseup', function () {

                document.removeEventListener('mousemove', moveS)

            })

        }

        function moveS(event) {

            let moveX = event.pageX - x

            let moveY = event.pageY - y -2000

            if (moveX >= 400) {

                moveX = 400

            }

            if (moveX < 0) {

                moveX = 0

            }

            if (moveY >= 400) {

                moveY = 400

            }

            if (moveY < 0) {

                moveY = 0

            }

            moves.style.top = moveY+'px'

            moves.style.left = moveX+'px'

        }

</script>