javascript - 如何限制具有 parent 权利和底部值(value)的可拖动 child ？

Question

我正在尝试制作可拖动的 map 。我找到了如何限制左侧和顶部的可拖动子项，但无法弄清楚如何为右侧和底部制作相同的东西。

如何限制具有父级右值和底值的可拖动子级？

     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
      }

这是我的 jsfiddle

Answer 1

您可以尝试使用 getBoundingClientRect 方法而不是使用 position 方法。Element.getBoundingClientRect() 方法返回一个包含一组文本矩形的文本矩形对象。

rectObject = object.getBoundingClientRect();

The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.

然后您可以获得元素的 top,left,right,bottom 值，即 rectObject.right,rectObject.top,rectObject.bottom,

引用:https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

或者，为什么不试试 jquery draggable 中的 containment 选项。链接:http://api.jqueryui.com/draggable/#option-containment