Jquery 为什么如果使用转换规模，juserui可拖动遏制不起作用

const draggableElement = $("#draggable")
let containmentArea = $("#innerWrapper");
let percent = 1


draggableElement.draggable({
  cursor: "move",
  drag: dragFix,
});


function dragFix(event, ui) {
  var contWidth = containmentArea.width(),
    contHeight = containmentArea.height();
  ui.position.left = Math.max(0, Math.min(ui.position.left / percent, contWidth - ui.helper.width()));
  ui.position.top = Math.max(0, Math.min(ui.position.top / percent, contHeight - ui.helper.height()));
}


function setScale(scalePercentage) {
  percent = scalePercentage;
  $("#innerWrapper").css({
    'transform': 'scale(' + percent + ')',
    '-moz-transform': 'scale(' + percent + ')',
    '-webkit-transform': 'scale(' + percent + ')',
    '-ms-transform': 'scale(' + percent + ')'
  })
}


const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  setScale(1.2)
});

#wrapper {
  width: 100%;
  height: 300px;
  overflow: auto;
}

#innerWrapper {
  width: 250px;
  height: 250px;
  position: relative;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
}

#draggable {
  display: inline;
  position: absolute;
  top: 10px;
  left: 10px;
}

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

<button id="btn">Zoom in</button>
<div id="wrapper" style="background-color:aliceblue;padding:50px;">
  <div id="innerWrapper" style="background-color: ivory; min-height: 200px; width: 400px; ">
    <div id="draggable" style="background-color:burlywood;max-width:100px;">Move me</div>
  </div>
</div>