Javascript 如何使用parent的right和bottom值限制可拖动的子级？

我正在试着画一张可拖动的地图。我发现了如何在左侧和顶部限制一个可拖动的孩子，但不知道如何在右侧和底部做相同的事情

如何使用parent的right和bottom值限制可拖动的子级

     var uright = ui.position.left + 960;  /* 960 is map height*/
     var pright = parentPos.left + 700;    /* 500 is container height*/

      if (ui.position.top > parentPos.top) {
     ui.position.top = parentPos.top; // works fine
      }
       if (ui.position.left > parentPos.left) {
     ui.position.left= parentPos.left; // works fine
      }
    if (uright > pright) {
        uright = pright; // that doesnt work
      }

---

这是我的

您可以尝试使用

getBoundingClientRect

方法，而不是使用

position

方法。Element.getBoundingClientRect（）方法返回一个包含一组文本矩形的文本矩形对象

rectObject = object.getBoundingClientRect();

返回的值是TextRectangle对象，它是 getClientRects（）为元素返回的矩形，即CSS 与元素关联的边框框

返回的值是一个TextRectangle对象，它包含只读 描述中边框框的左、上、右和下属性 像素。“顶”和“左”相对于视口的左上角

然后可以获取元素的

top、left、right、bottom

值，即

rectObject.right、rectObject.top、rectObject.bottom，

参考：

或者，为什么不试试jquerydraggable中的

containment

选项呢。

---

链接：

是否可以在容器中选择起始位置（例如：地图的中间位置）？您可以在DragTable中使用辅助选项。探索draggable的api。有很多很好的选择可供使用@古汉很乐意帮忙：）