javascript - 有没有办法改变 CSS 调整 Angular 的位置？

Question

所以这是一个有点奇怪的问题。使用可调整大小的 div 编写 Web 应用程序。我目前正在使用 CSS resize 属性，因为它似乎是最简单的方法。问题是我的盒子有一个锁定的底部和左侧位置(我想保持)，但默认选择的调整大小 Angular 是右下角，这会产生奇怪的调整顶部大小的结果。在网上环顾四周，但找不到将该 Angular 移动到右上而不是右下的方法。关于如何产生这个结果有什么建议吗？也不反对使用不同的调整大小的方法。这是应用于框的当前样式:

display: block; 
font-size: 9pt; 
position: absolute; 
bottom: 50px; 
left: 20px; 
padding: 10px; 
min-height: 0; 
min-width: 0; 
border: solid 1px black; 
width:400px; 
height:400px; 
resize: both; 
overflow-x: auto; 
overflow-y: hidden;

这是一张有问题的 div 的图片，其 Angular 上当前有调整大小工具。任何建议将不胜感激。我非常乐意详细说明我也可能错过的事情。谢谢!

Box I want to resize in question

Answer 1

这是一个起点。我基本上在右上角创建了一个自定义调整大小图标。然后，我使用“mousedown”、“mousemove”和“mouseup”事件来跟踪调整大小的事件。您也许可以使用“拖动”和相关事件来做类似的事情。

请注意，“mousedown”位于调整大小图标上，而“mousemove”和“mouseup”位于文档正文(或可调整大小的 div 后面的其他较大元素)上。

为了简单起见，我在 JavaScript 中对宽度和高度进行了硬编码。这意味着这些值存在于两个不同的地方，这是不好的。您可能应该只将它们放在 JavaScript 或 CSS 中，而不是像我所做的那样同时放在两者中。

我需要将可调整大小的 div 放入一个充满主体的容器中。否则，可调整大小的 div 之外的“mousemove”事件不会被注册。如果您的绝对定位可调整大小元素“背后”已经有其他内容，这可能不是问题。

供您引用:我最初也尝试过使用 native 调整大小功能。我使用 transform: rotate(-90deg) 将调整大小的 Angular 移动到右上角，然后用 transform: rotate(90deg) 放入一个内部 div 来制作内部再次满足正确的方式。然而，虽然这将调整大小的 Angular 放在正确的位置，但调整大小本身完全困惑了，因为鼠标移动和实际调整大小本身偏离了 90 度。这有点难以用语言来描述，但足以说明，如果没有一些重大的重新工作(或者可能是一些出色的代码或隐藏的功能)，我无法使该策略发挥作用。

var
  doc = document,
  ht = 400,
  wd = 400,
  main = document.querySelector("#resizable"),
  x, y, dx, dy;

var startResize = function(evt) {
  x = evt.screenX;
  y = evt.screenY;
};

var resize = function(evt) {
  dx = evt.screenX - x;
  dy = evt.screenY - y;
  x = evt.screenX;
  y = evt.screenY;
  wd += dx;
  ht -= dy;
  main.style.width = wd + "px";
  main.style.height = ht + "px";
};

rsz.addEventListener("mousedown", function(evt) {
  startResize(evt);
  doc.body.addEventListener("mousemove", resize);
  doc.body.addEventListener("mouseup", function() {
    doc.body.removeEventListener("mousemove", resize);
  });
});

#container {
  position: absolute;
  border: solid red 1px;
  margin: 0;
  height: 100%;
  width: 100%;
}
#resizable {
  display: block;
  font-size: 9pt;
  position: absolute;
  bottom: 50px;
  left: 20px;
  padding: 10px;
  min-height: 0;
  min-width: 0;
  border: solid 1px black;
  width: 400px;
  height: 400px;
  overflow-x: auto;
  overflow-y: hidden;
}
#rsz {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.5);
}
#original {}

<div id="container">
  <div id="resizable">
    <div id="rsz"></div>
    (some content)
  </div>
</div>

如果您从 Stack Overflow 中运行此代码片段，则需要在单击“运行代码片段”后单击“整页”来扩展运行 View 区域。