查看jQuery UI -可拖动文档（https://api.jqueryui.com/draggable/）。
看起来你唯一不去定制的机会就是用drag event修改数据（更多信息请访问https://api.jqueryui.com/draggable/#event-drag）。
该文件引用了以下内容：
在拖动过程中移动鼠标时触发，在当前移动发生之前立即触发。
示例显示如下：

jQuery可拖动示例-拖动事件

使用指定的拖动回调初始化可拖动对象：

$( ".selector" ).draggable({
  drag: function( event, ui ) {}
});

将事件侦听器绑定到拖动事件：

$( ".selector" ).on( "drag", function( event, ui ) {} );

通过用户界面位置限制移动：

$( ".selector" ).draggable({
  drag: function( event, ui ) {
 
    // Keep the left edge of the element
    // at least 100 pixels from the container
    ui.position.left = Math.min( 100, ui.position.left );
  }
});

并且可能改变示例以获取位置并将其减少1. 5。

这是您的代码的变通方法/替代方法，可能不是您要查找的内容...

一开始我以为你的问题是因为缩放不会自动缩放元素所占的原始空间，并导致了一些 mousepos 偏移差异。通常这可以通过计算相对于所应用缩放的 * 正 * 或 * 负 * margin来纠正。正表示放大，负表示缩小，并将其分配给缩放后的元素margin。
但是，使用您的 Fiddle 进行测试，结果并不理想，因此我选择解决这个问题：

• 引入带有比例因子的CSS自定义属性（--scale-factor: 1.5），而不是transform: scale(..)或scale: ..
• calc(..)相对于--scale-factor的当前值列出所有相关尺寸
  代码片段、Fiddle、Codepen。

$('.draggable').draggable();

:root {
    --scale-factor: 1.5;   /* Initial scale factor */
    --base-size   : 1rem;  /* 16px, or whatever you require */
}

#parent {
    /* Base size relative to current scale factor */
    --scaled-size : calc(var(--scale-factor) * var(--base-size));

    /* Element is a square, using just one calc(..) */
    --element-size: calc(12.5 * var(--scaled-size)); /* 12.5 * 1rem (scaled!) = 200px */

    width    : var(--element-size); /* from 200px */
    height   : var(--element-size);
    font-size: var(--scaled-size); /* [OPTIONAL] */

    background: yellow;

    margin: calc(1.25 * var(--scaled-size)); /* [OPTIONAL], from 20px */
}

.draggable {
    height: 25%; /* from  50px */
    width : 50%; /* from 100px */
    /* Set these to original values if they should not be scaled */
    /* font-size: var(--base-size); /* dito, set to required size, here: 1rem */

    text-align: center;

    background: red;
    color: #fff;
}

/*************/
/* DEMO only */
/*************/
*    { outline: 1px dashed black } /* for debugging */

*    { box-sizing: border-box }

body { padding-top: 5rem; margin: 0 }

label {
    position: fixed; top: 0; left: 0; z-index: 9999;
    display: inline-flex; flex-direction: column;
    width: 100%; padding: 1rem; font-size: 1rem;
    background-color: hsl(0,0%,96%,.95); cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<label><span id="info-scale">Scale factor: 1.5</span>
  <input type="range" min="0.5" max="3" value="1.5" step="0.01" oninput="document.documentElement.style.setProperty('--scale-factor', this.value);
                    document.getElementById('info-scale').innerHTML = 'Scale factor: ' + this.value;"></label>

<div id="parent">
  <div class="draggable">Example</div>
</div>