如何在旋转的父级内获得子div的新顶部和左侧？

Question

我正在尝试在旋转的父级内使用子div的新顶部和左侧来限制旋转父级的可拖动区域。我使用jquery draggable为此。

编辑： 这是jsfiddle。我计划使用旋转div上的红点作为标记来检查它是否与容器的边界相撞。我需要获得该红色标记的新位置（顶部和左侧）以利用我的现成功能来包含可拖动的。

Answer 1

为了计算任何元素的top或left偏移量，您需要使用 .getBoundingClientRect() ，以及 window scroll

旋转元素的情况也是如此，如以下示例所示：

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {
    top: rec.top + window.scrollY,
    left: rec.left + window.scrollX
  };
}

console.log(findTopLeft('inner'));

#outer {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  transform: rotate(90deg);
}

<div id="outer">
  <div id="inner">Text</div>
</div>

希望这有帮助！ ：）