时间戳

首页 > 解决方案 > 调整从右侧固定位置的元素大小时出现问题

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

问题描述

我有一个 div，它从窗口右侧的固定位置开始，但它是可拖动的（使用 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的负载。我随后尝试使用 jQuerypromise()并queue()首先应用 css，然后移动元素，但这些也不起作用。我也尝试过使用 jQuery UI resizable()，但这似乎根本没有调整大小。在这一点上，我没有想法，希望能提供任何帮助。

标签： cssresizecss-positiondraggable

解决方案

仅限 CSS 的解决方案： 您只需要最初将交给固定位置的 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>

更新小提琴：https ://jsfiddle.net/mravdo52/6/

推荐阅读