javascript - jquery ui：向上和向下拖动图像：按像素限制

Question

我有一个图像，我必须向上和向下移动图像，我正在使用 jquery ui 可拖动包含选项，但它没有按预期工作

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

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

演示：http: //jsfiddle.net/m3e6V/3/

Answer 1

您对代码所做的是定义一个框来限制图像，该框从左上点 (0,100) 到右下点 (0,100)，因此您基本上不允许图像移动它跳到（0,100）。

最简单的方法是定义一个父元素，该元素设置为您想要的大小（通过 CSS），并定义axis: "y"为使其仅垂直移动并containment: "parent"保持在那里。

所以总结一下：

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

和 JS

$( "#img" ).draggable({axis: "y", containment: "parent" });

现场演示：jsFiddle

更新：如果您要求图像不从元素顶部开始，您可以调整其位置，方法相同：为图像元素.draggable()添加内联 CSS 。position:relative; top: 100px;

更新的演示：jsFiddle