带角的 jQueryUI 可拖动棒

Question

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

new ScrollZoom($('.parent'),20,0.5)
    $('.child').draggable();

.parent {
      width: 400px;
      height: 400px;
      border: 1px solid;
      margin: auto;
    }
    .child {
      width: 380px;
      height: 380px;
      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>
    <script src="https://techeak.com/zoominout.js"></script>
    <div class="parent">
      <div class="child">
        
      </div>
    </div>

孩子的左角应该和父母的左角贴在一起。

和权利与父母的权利。

与上底相同。

PS：在子元素上向上向下滚动以放大 我正在尝试编写这样的功能 https://zegami.com/collections/public-5d7d31a84a1e710001f3a1c8?pan=FILTERS_PANEL&view=grid

Answer 1

我猜你正在尝试制作各种缩放标线。您正在使用的 Zoom In Out 脚本没有一个很好的方法来在对象被缩放时关联到事件。这使得获得规模有点困难。可以通过检查 child 元素的 CSS 来完成。

使用这个比例，您可以调整 Draggable Containment。

将拖动限制在指定元素或区域的范围内。支持多种类型：

• 选择器： 可拖动元素将包含在选择器找到的第一个元素的边界框内。如果未找到任何元素，则不会设置包含。
• 元素：可拖动元素将包含在该元素的边界框内。
• 字符串：可能的值："parent"、"document"、"window"。
• 数组：以[ x1, y1, x2, y2 ] 形式定义边界框的数组。

对于这个 sn-p，我们将使用 Array 格式来管理 child 的 left 和 top，以便在 4 个边界内进行遏制。每当child 被缩放时，这都会改变。此示例重点关注左右包含，可以扩展为管理顶部和底部。

$(function() {
  function getBounds(tObj) {
    var t = tObj.position().top;
    var l = tObj.position().left + parseInt(tObj.css("margin-left"));
    var b = t + tObj.height();
    var r = l + tObj.width();
    return [l, t, r, b];
  }

  function getScale(tObj) {
    var c = tObj.css("transform");
    var p = c.split(", ");
    var s = parseFloat(p[3]);
    return s;
  }

  function calcCont(tObj) {
    var b = getBounds(tObj);
    var child = tObj.children()[0];
    var s = getScale($(child)) || 1;
    var n = [
      b[0],
      b[1],
      b[2],
      b[3]
    ];
    if (s > 1) {
      n[0] = b[2] - ($(child).width() * s);
      n[2] = b[0];
    }
    return n;
  }
  new ScrollZoom($('.parent'), 20, 0.5);
  $('.child').draggable({
    containment: calcCont($(".parent"))
  });
  $(".parent").on("mousewheel DOMMouseScroll", function(e) {
    $(".child").draggable("option", "containment", calcCont($(".parent")));
    return true;
  });
});

body {
  background: #222;
}

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin: auto;
}

.child {
  width: 380px;
  height: 380px;
  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>
<script src="https://techeak.com/zoominout.js"></script>
<div class="parent">
  <div class="child">

  </div>
</div>