Question

我正在尝试制作一张可拖动的地图。我找到了如何限制左侧和上侧的可拖动儿童，但无法弄清楚如何为右侧和底侧制作相同的东西。

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

     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();

返回的值是一个TextRectangle对象，它是该对象的并集   getClientRects（）为元素返回的矩形，即CSS   与元素相关联的边框。

返回的值是一个TextRectangle对象，它包含只读   左，上，右和底属性描述了边框   像素。 top和left相对于视口的左上角。

然后，您可以获得该元素的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

如何限制父母的权利和最低价值的可拖动儿童？

1 个答案: