垂直内容内的可拖动图像答案

【问题标题】：Draggable image within a vertical content垂直内容内的可拖动图像
【发布时间】：2012-06-01 10:55:16
【问题描述】：

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

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

好吧，“image_holder”将图像的可见区域设置为遮罩，设置其宽度=180px、高度=90px 和overflow=hidden 属性。

当我将图像加载到“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"});

'excess' 的计算来自：

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： jquery draggable jquery-ui-draggable

【解决方案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

【讨论】：