Question

我正在尝试使用边界创建可拖动图像的效果。好吧，我有一个固定宽度但高度可变的图像。我有下一个代码：

<div class="image_holder">
   <div class="image_content"></div>
</div>

好吧，“image_holder”设置图像的可见区域作为遮罩，宽度= 180px，高度= 90px，溢出=隐藏属性设置。

当我将图像加载到“image_content”时，通常情况下，高度会更高，但是屏蔽并且只能看到“image_holder”的区域。

问题是，当我使用jquery draggable函数时，它的工作正常，但我需要设置边界。我使用下一个代码：

$("#draggable").draggable({axis: 'y', containment: [0, $('.image_holder').offset().top-excess, 180, $('.image_holder').offset().top+90+excess], cursor: "crosshair"});

'多余'是来自的计算：

var excess = $('#draggable').height() - 90;

我的问题是，我无法正确划分包含区域以拖动图像，而图像不会离开可见区域。

任何帮助都将不胜感激。

Answer 1

如果我理解正确;您可以通过监视拖动事件来实现此目的：

$('img').draggable({
    axis: 'y',
    drag: function(event, ui) {
        var pos = ui.position;
        var $this = $(this);

        if((pos.top * -1) >= ($this.height() - $this.parent().height()))
        {
            return false;
        }

        if(pos.top > 0)
        {
            return false;
        }
    }
});

基本上，如果图像即将超出容器的边界，只需返回false

DRAG DEMO

垂直内容中的可拖动图像

1 个答案: