Below is the code snippet:
JavaScript jQuery
$('.dragBox').draggable({
axis: 'y',
appendTo: 'parent',
containment: [0,0,0,150],
start: function() {
$(this).addClass('grabbing');
},
stop: function() {
$(this).removeClass('grabbing');
}
});
HTML Markup
<div class="container">
<div class="cropBox"><div class="dragBox"></div></div>
</div>
The issue is that the .dragBox component is not appending to .cropBox. The y-axis of the inner box does not start at 0 but rather at -117. This is because there is a 117 pixel distance between .cropBox and the top edge of the window.
CORRECTION
The problem has been resolved.
startDrag();
$(window).resize(function(){
startDrag();
});
function startDrag(){
// Code logic for fixing the positioning issue
}
Thank you all for your assistance!