js自由拖动图片大小

<div id="container">
  <img id="draggableImage" src="path/to/image.jpg" alt="Drag me">
</div>

#container {
  position: relative;
  width: 100%;
  height: 100vh;
}

#draggableImage {
  position: absolute;
  cursor: move;
}

const image = document.getElementById('draggableImage');
let isDragging = false;
let startX, startY, initialX, initialY;

image.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = image.offsetLeft;
  initialY = image.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  image.style.left = `${initialX + dx}px`;
  image.style.top = `${initialY + dy}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 调整大小功能
let isResizing = false;
let startXSize, startYSize, initialWidth, initialHeight;

image.addEventListener('mousedown', (e) => {
  if (e.offsetX < 10 || e.offsetY < 10 || e.offsetX > image.width - 10 || e.offsetY > image.height - 10) {
    isResizing = true;
    startXSize = e.clientX;
    startYSize = e.clientY;
    initialWidth = image.width;
    initialHeight = image.height;
  }
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  const dx = e.clientX - startXSize;
  const dy = e.clientY - startYSize;
  image.style.width = `${initialWidth + dx}px`;
  image.style.height = `${initialHeight + dy}px`;
});

document.addEventListener('mouseup', () => {
  isResizing = false;
});