Jquery -如何在图片上绘制可以拖动和移除的线框(对象)？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="container">
  <img src="path/to/image.jpg" id="image">
</div>

#container {
  position: relative;
  width: 500px;
  height: 500px;
  background-image: url(path/to/image.jpg);
  background-size: cover;
}

$(document).ready(function() {
  var container = $('#container');
  var image = $('#image');
  
  image.mousedown(function(e) {
    // 在此处处理鼠标按下事件
  });
  
  image.mousemove(function(e) {
    // 在此处处理鼠标移动事件
  });
  
  image.mouseup(function(e) {
    // 在此处处理鼠标释放事件
  });
});

image.mousedown(function(e) {
  var startX = e.pageX - container.offset().left;
  var startY = e.pageY - container.offset().top;
  
  var box = $('<div class="box"></div>');
  box.css({
    left: startX,
    top: startY
  });
  
  container.append(box);
});

image.mousemove(function(e) {
  if (box) {
    var mouseX = e.pageX - container.offset().left;
    var mouseY = e.pageY - container.offset().top;
    
    var width = mouseX - startX;
    var height = mouseY - startY;
    
    box.css({
      width: width,
      height: height
    });
  }
});

image.mouseup(function(e) {
  box.remove();
});