javascript在div中缩放和拖动多个图像。获得了一些代码，但无法结束

<div id="container">
  <img src="image1.jpg" class="draggable resizable">
  <img src="image2.jpg" class="draggable resizable">
  <img src="image3.jpg" class="draggable resizable">
</div>

#container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

.draggable {
  position: absolute;
  cursor: move;
}

.resizable {
  resize: both;
  overflow: auto;
}

// 获取所有可拖动和可缩放的图像元素
var images = document.querySelectorAll('.draggable.resizable');

// 绑定拖动和缩放事件
images.forEach(function(image) {
  // 初始化拖动功能
  image.addEventListener('mousedown', startDrag);

  // 初始化缩放功能
  image.addEventListener('mousedown', startResize);
});

// 拖动功能实现
function startDrag(e) {
  var image = e.target;
  var offsetX = e.clientX - image.offsetLeft;
  var offsetY = e.clientY - image.offsetTop;

  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);

  function drag(e) {
    image.style.left = e.clientX - offsetX + 'px';
    image.style.top = e.clientY - offsetY + 'px';
  }

  function stopDrag() {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDrag);
  }
}

// 缩放功能实现
function startResize(e) {
  var image = e.target;
  var startX = e.clientX;
  var startY = e.clientY;
  var startWidth = parseInt(getComputedStyle(image).width);
  var startHeight = parseInt(getComputedStyle(image).height);

  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);

  function resize(e) {
    var newWidth = startWidth + e.clientX - startX;
    var newHeight = startHeight + e.clientY - startY;

    image.style.width = newWidth + 'px';
    image.style.height = newHeight + 'px';
  }

  function stopResize() {
    document.removeEventListener('mousemove', resize);
    document.removeEventListener('mouseup', stopResize);
  }
}