Javascript jqueryui：向上和向下拖动图像：像素限制

我有一个图像，我必须向上和向下移动图像，我使用jQueryUIDraggableContainment选项，但它没有按预期工作

<img style="margin-top:200px;" id='img' src='https://www.google.com/images/srpr/logo11w.png' />

$( "#img" ).draggable({containment: [0, 100, 0, 100] });

$（“#img”）.draggable（{containment:[01100,01100]}）；

---

演示：

您对代码所做的是定义一个框来限制图像，该框从左上角点（0100）到右下角点（0100），因此基本上不允许图像在跳到（0100）后移动

最简单的方法是定义一个设置为所需大小的父元素（通过CSS），并定义

轴：“y”

使其仅垂直移动，并定义

包容：“parent”

使其保持在那里

因此，总结一下：

<div style="height: 300px; width: 100%;">
  <img id="img" src="https://www.google.com/images/srpr/logo11w.png' />
</div>

现场演示：

更新：如果您要求图像不从元素的顶部开始，您可以使用与

相同的方法调整其位置。draggable（）

可以：为

位置：相对添加内联CSS；顶部：100px到图像元素

更新的演示：
可能重复：检查但图像没有向上移动，我想将图像向上移动100px和100pxdownwards@DanielDzussa：然后通过CSS进行调整：谢谢，但不幸的是，我无法扩展父级。你能检查一下吗？@DanielDzussa:不清楚你想要什么-蓝色的水平线目前包含在两个橙色框的顶部之间。应该包含什么？对不起，我的意思是，他们在代码中定义了y1和y2，我想动态定义y1和y2。所以我需要一个与y1和y2一起工作的解决方案，谢谢
$( "#img" ).draggable({axis: "y", containment: "parent" });