Question

I’m trying to create the effect of an image draggable using boundaries. well, i have an image with a fixed width but a variable height. i have the next code:

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

well, “image_holder” set the visible area of the image acting as a mask, with its width=180px, height=90px and overflow=hidden properties set.

when i load the image into “image_content”, normally, the height is higher but masked and only visible the area of “image_holder”.

The question is that when i use the jquery draggable function, its works fine but i need to set boundaries. i use the next code:

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

‘excess’ is a calculation from:

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

My problem is that I’m not able to delimitate properly the containment area for dragging the image without the image leave the visible area.

Any help would be appreciated.

Answer 1

If I understand correctly; you can achieve this by monitoring the drag event as follows:

$('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;
        }
    }
});

Basically if the image is about to go outside the bounds of the container just return false

DRAG DEMO