带有角的jQueryUI可拖动杆

Question

我如何通过自定义一些限制使项目可拖动。它应该保留在框中。但是父母比孩子小的尺寸。让我解释这是游乐场

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

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin: auto;
}
.child {
  width: 300px;
  height: 300px;
  transform: scale(2, 2);
  background: rgba(255, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
  <div class="child">
    
  </div>
</div>

孩子的左上角应该粘在父母的左上角。

[还有父母的权利。

与顶部相同。

PS：我正在使用CSS缩放来放大滚动。我正在尝试编码这样的功能https://zegami.com/collections/public-5d7d31a84a1e710001f3a1c8?pan=FILTERS_PANEL&view=grid

Answer 1

似乎有一个drag回调，可用于在鼠标移动时重置位置。

以下内容固定在左侧和顶部。

var minimumLeft = 100;
var minimumTop = 200;
$('.child').draggable({
  drag: function( event, ui ) {
    var position = ui.position;
    if (position.left > minimumLeft) {
      position.left = minimumLeft
    }
    if (position.top > minimumTop) {
      position.top = miminumTop;
    }
  }
});

您需要添加一些额外的数学来找出另一端涉及position.left和框宽的固定。