拖动红色小方块,限制方块不能拖动到盒子外部

大盒子-box

红色方块盒子 - innerbox

最最左边是文档页面的左边框

   若鼠标落下的点设为A(x,y),,我们要求出A点在 innerbox 内的坐标，即A相当于innerbox的偏移量

我们将A点的水平偏移量设置为 mouseX,垂直方向的偏移量设为 mouseY

由图分析可见，

mouseX = pageX - box.offsetLeft - innerbox.offsetLeft

mouseY = pageY - box.offsetTop - innerbox.offsetTop

    接下来，我们要计算出 innerbox 相对于 box的偏移量，将这个值赋值给innerbox的left，，，这个left值是动态的，这样子红色方块就能跟着我们的鼠标移动

由图可见；

 

  let targetLeft = e.pageX - box.offsetLeft - mouseX

  let targetTop = e.pageY - box.offsetTop - mouseY

 innerbox.style.left = targetLeft + 'px'

 innerbox.style.top = targetTop + 'px'

 完整代码：

      html部分

  <div class="box">

        <div class="innerbox"></div>

    </div>

 CSS部分

  .box {

         position: relative;

         width: 300px;

         height:300px;

         border: 1px solid #ccc;

         margin: 100px;

         padding: 50px

    }

    .innerbox {

        position: absolute;

        width: 100px;

        height: 100px;

        background-color: red;

        cursor: move;

    }

js部分

   <script>

        let box = document.querySelector('.box')

        let innerbox = document.querySelector('.innerbox')

        let mouseX = 0

        let mouseY = 0

        document.addEventListener('mousedown',(e) => {

            mouseX = e.pageX - box.offsetLeft - innerbox.offsetLeft

            mouseY = e.pageY - box.offsetTop - innerbox.offsetTop

            document.addEventListener('mousemove',move)

            function move(e) {

                let targetLeft = e.pageX - box.offsetLeft - mouseX

                let targetTop = e.pageY - box.offsetTop - mouseY

                // 水平不超出

                if(targetLeft < 0) {

                    targetLeft = 0

                }else if(targetLeft > box.clientWidth - innerbox.clientWidth) {

                    targetLeft = box.clientWidth - innerbox.clientWidth

                }

                // 垂直方向不超出

                if(targetTop < 0) {

                    targetTop = 0

                }else if(targetTop > box.clientHeight - innerbox.clientHeight) {

                    targetTop = box.clientHeight - innerbox.clientHeight

                }

                innerbox.style.left = targetLeft + 'px'

                innerbox.style.top = targetTop + 'px'

            }

            document.addEventListener('mouseup',() => {

                document.removeEventListener('mousemove',move)

            })

        })

    </script>