相对定位的div调整大小属性改变其位置

Question

我正在尝试创建一个可拖动调整大小的对话框，但我无法让它从右到左、从下到上调整大小。我希望能够调整 div 的大小而不改变其位置。如果你看一下可待因上的演示，你可以从右下角拖动。就好像它的宽度调整使用 div 的中心作为其变换原点。当然，将 css 中的变换原点属性设置为左上角对调整大小没有任何作用。

非常感谢任何帮助。

代码笔链接

    $( "#os_window" ).draggable({ handle: "#window_top_bar" });
    $( "#os_window" ).resizable();

我在这方面找不到什么方向

Answer 1

我也尝试过，但没有按预期工作。也尝试过手动设置位置但效果不佳。

所以最后我为这种情况创建了另一个例子。

let dragEl = null;
let offsetX = 0;
let offsetY = 0;

document.querySelector('.box-header').addEventListener('mousedown', (event) => {
  dragEl = event.target.closest('.box');
  offsetX = event.clientX - dragEl.offsetLeft;
  offsetY = event.clientY - dragEl.offsetTop;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(event) {
  if (!dragEl) return;
  dragEl.style.left = `${event.clientX - offsetX}px`;
  dragEl.style.top = `${event.clientY - offsetY}px`;
}

function onMouseUp() {
  dragEl = null;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}

.box {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  resize: both;
  overflow: hidden;
}

.box-header {
  background-color: #ccc;
  padding: 10px 15px;
  cursor: move;
}

<div class="box" data-draggable="true" data-resizable="true">
  <div class="box-header drag-handle" data-drag-handle="true">Drag here</div>
  <div class="box-body">Drag and resize box</div>
</div>