阻止jquery可拖动div移出背景图像

$("#draggable").mousedown(function(event) {
  // 记录鼠标按下时的初始位置
  var startX = event.pageX - $(this).offset().left;
  var startY = event.pageY - $(this).offset().top;

  // 添加mousemove事件监听器，实现拖动效果
  $(document).mousemove(function(event) {
    // 计算鼠标移动的距离
    var moveX = event.pageX - startX;
    var moveY = event.pageY - startY;

    // 设置可拖动元素的新位置
    $("#draggable").css({
      left: moveX,
      top: moveY
    });
  });

  // 添加mouseup事件监听器，结束拖动操作
  $(document).mouseup(function() {
    // 移除mousemove和mouseup事件监听器
    $(document).off("mousemove");
    $(document).off("mouseup");
  });
});

$(document).mousemove(function(event) {
  var moveX = event.pageX - startX;
  var moveY = event.pageY - startY;

  // 获取背景图像的宽度和高度
  var bgWidth = $("#parent").width();
  var bgHeight = $("#parent").height();

  // 获取可拖动元素的宽度和高度
  var dragWidth = $("#draggable").width();
  var dragHeight = $("#draggable").height();

  // 计算可拖动元素的边界值
  var maxX = bgWidth - dragWidth;
  var maxY = bgHeight - dragHeight;

  // 判断是否超出边界，如果超出则限制在边界内
  var newX = Math.min(Math.max(0, moveX), maxX);
  var newY = Math.min(Math.max(0, moveY), maxY);

  $("#draggable").css({
    left: newX,
    top: newY
  });
});