带角的 jQueryUI 可拖动棒

Question

我怎样才能让一个项目在自定义一些限制的情况下可以拖动。它应该留在盒子里。但是 parent 的尺寸比 child 小。让我解释这里是游乐场

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>

child 的左角应该贴在parent 的左角上。

和 parent 的权利。

上下同上

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

Answer 1

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

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

Constrains dragging to within the bounds of the specified element or region. Multiple types supported:

Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.

Element: The draggable element will be contained to the bounding box of this element.

String: Possible values: "parent", "document", "window".

Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

对于此代码段，我们将使用数组格式来管理 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>

带角的 jQueryUI 可拖动棒

jQueryUI draggable stick with corners

jquery

jquery-ui

draggable