调整从右侧固定位置的元素的大小时出现问题

Question

我有一个 div，它从 window 右侧的固定位置开始，但它是可拖动的（使用 javascript）和可调整大小的（使用 css).问题是如果先调整 div 的大小（通过抓住右下角），它不会正确调整大小。它会从右边保持固定的位置，然后从左边变大或变小。但是，如果先拖动 div，则调整大小将按预期进行。这些是 div 的当前 css 属性：

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

演示：

https://jsfiddle.net/mravdo52/2/

我尝试了各种解决方法。由于 div 的移动似乎使 resize 正常工作，我尝试在加载元素后将 div 移动一个像素，但这不起作用，因为我认为元素的加载、javascript 的执行和 css 的加载之间存在时间问题。我随后尝试使用 jQuery promise() 和 queue() 先应用 css，然后移动元素，但这些也不起作用。我也尝试过使用 jQuery UI resizable()，但似乎根本没有调整大小。我现在没有想法，希望得到任何帮助。

Answer 1

CSS唯一解： 您只需要将 left 初始设置为 fixed positioned div。

解法说明： 之所以在拖动元素后工作是因为它正在申请左侧位置，所以我们可以在拖动元素之前给出左侧位置并且它会工作！

首先尝试给 left: auto/initial/inherit 但没有成功。所以你可以这样写：left: calc(100% - 120px);

(120px表示右边位置30px加上div宽度90px)

#resize {
  position: fixed;
  right: 30px;
  left: calc(100% - 120px);
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
  min-width: 90px;
  min-height: 90px;
  max-width: calc(100% - 60px);
  max-height: calc(100vh - 50px);
}

dragElement(document.getElementById("resize"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById("drag")) {
    document.getElementById("drag").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
  min-width: 90px;
  min-height: 90px;
  max-width: calc(100% - 60px);
  max-height: calc(100vh - 50px);
}

#drag {
  background-color: red;
  height: 20px;
}

<div id="resize">
  <div id="drag">
  </div>
</div>

已更新 fiddle：https://jsfiddle.net/mravdo52/6/

调整从右侧固定位置的元素的大小时出现问题

Problem resizing element that's a fixed position from the right

css

resize

css-position

draggable