0

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

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

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

当我将图像加载到“image_content”中时，通常高度较高但被遮盖并且仅可见“image_holder”区域。

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

$("#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;

我的问题是，如果图像离开可见区域，我无法正确划定用于拖动图像的包含区域。

任何帮助，将不胜感激。

4

1 回答 1

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

拖动演示

于 2012-06-01T12:20:44.977 回答