带角的 jQueryUI 可拖动棒

Posted 2023-05-08

【中文标题】带角的 jQueryUI 可拖动棒

【英文标题】：jQueryUI draggable stick with corners

【发布时间】：2020-07-27 21:33:17

【问题描述】：

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

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

【问题讨论】：

这个很不清楚。听起来您希望 child 成为 parent 的句柄。这样，当你移动child时，parent也随之移动？

不，孩子是通过 CSS 缩放的

运行 sn-p 并检查

我在发表评论之前运行了 sn-p，但不清楚什么不起作用或您想要实现什么。

【参考方案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>

【讨论】：

@IbrahimCh 是的，我说过，“此示例侧重于左右包含，可以扩展为管理顶部和底部。”