jQuery可拖动的子容器

Question

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

1. 如果子对象底部到达父对象底部，我希望防止在y轴上进一步向上拖动
2. 如果子顶部到达父顶部(即页面加载的初始位置(，请防止在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
}
});

Answer 1

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

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
});