Click here for the interactive demo.
I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example below:
#pic-area{
overflow:hidden;
height:150px;
width:500px;
border:2px solid #000;
}
UPDATE: Issue Resolved!
$(document).ready(function(){
$("#cover").draggable({
stop: function(ev, ui) {
var hel = ui.helper, pos = ui.position;
//horizontal
var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
if (pos.top >= 0) {
hel.css({ top: 0 });
} else if (pos.top <= h) {
hel.css({ top: h });
}
// vertical
var v = -(hel.outerWidth() - $(hel).parent().outerWidth());
if (pos.left >= 0) {
hel.css({ left: 0 });
} else if (pos.left <= v) {
hel.css({ left: v });
}
}
});
});
For a working example, please see this link
UPDATE2
Alternatively, you can try this version as well.
var topX = $('#pic-area').outerWidth() - $('#cover').width() + ($('#pic-area').offset().left*2);
var topY = $('#pic-area').outerHeight() - $('#cover').height() + ($('#pic-area').offset().top*2);
$('#cover').draggable({
containment: [topX, topY, 0, 0]
});