jQuery 可拖动子控件答案

【问题标题】：jQuery Draggable Child ContainmentjQuery 可拖动子控件
【发布时间】：2022-01-18 06:19:25
【问题描述】：

我正在使用 jQuery-ui 库在父容器中拖动图像/子项。理论上，我试图在浏览器中复制网页的边界。我想：

如果子底部到达父底部，我想防止在 y 轴上进一步向上拖动。
如果子顶部到达父顶部（这是页面加载的初始位置），请防止在 y 轴上向下拖动。

一个快速的 CodePen 来帮助说明我在哪里：https://codepen.io/austin-branham/full/eYGgoNg

我的脚本：

var draggableHeight = $('.draggable').height();
var parentHeight = $('.project-image').height();

$('.draggable').draggable({
  axis: "y",
  drag: function(e, ui) {
    // figure out how far to drag within this function
  }
});

【问题讨论】：

你试过这样$('.draggable').draggable({axis: "y", containment: "parent"}); 吗？

标签： jquery css jquery-ui draggable drag

【解决方案1】：

我能够研究如何防止孩子在其底部遇到父级的底部后继续拖动。由于我的设计中的 75px 边距，diff 变量有 - 75。对于其他人来说，这将是一个需要定义的变量。解决方法：

  var drag = $('.draggable')
  drag.draggable({
    axis: "y",
    drag: function(e, ui) {
      var parentHeight = $('.project-image').height(),
          childHeight = drag.height(),
          diff = childHeight - parentHeight - 75
          
      if (ui.position.top > 0) {
        ui.position.top = 0;
      }
      if (ui.position.top <= '-' + diff) {
        ui.position.top = '-' + diff;
      }
    },
    scroll: false
  });

【讨论】：