jQuery ui ddraggable:按像素限制可拖动区域 [英] jquery ui ddraggable : limit dragable area by pixels

问题描述

我有一个图像，我希望允许用户仅在Y轴上拖动图像，并且必须限制像素拖动，这意味着用户只能在Y轴上拖动200个像素(上下).

I have an Image and I want to allow users to drag the image only in Y axis and I have to limit the dragging by pixels, which means users can drag only 200 pixels in Y axis (either upside and downside)

  <script>
  $(function() {
    $( "#img" ).draggable({ axis: "y" });
  });
  </script>

我只能在Y轴上限制拖动，但没有看到限制像素拖动的选项.

I could limit the dragging in Y axis only but I didn't see an option to limit the dragging in pixels.

请帮助

推荐答案

还有"containment"选项，您可以在其中指定带有坐标的边界框(以及其他选项).

There is also the option 'containment' where you can specify a bounding box with coordinates (among other options).

$( "#img" ).draggable({ containment: [x1, y1, x2, y2] });

http://api.jqueryui.com/draggable/#option-containment

这是一个JSFiddle，在这里我将图像的移动限制在y轴的0-200像素之间. http://jsfiddle.net/m3e6V/

Here is a JSFiddle where I limit the movement of the image between 0-200 pixels on the y axis. http://jsfiddle.net/m3e6V/

这篇关于jQuery ui ddraggable:按像素限制可拖动区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！