I think what you have to do is use the drag
event of draggable to implement the resize action. This seems pretty close to what you want:
$('#queue').draggable({
axis: "x",
scroll: false,
drag: function( event, ui ) {
var ft = $('footer').position().top;
var fh = $('footer').height();
$('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
$('footer').css('top', ui.offset.top);
}
});
I also had to change the position of footer
to absolute
-- otherwise it goes all wonky, that might not be ideal for what you want to do.
EDIT
I can get close to what I think you want by doing this:
$('#queue').draggable({
axis: "x",
scroll: false,
start: function( event, ui ) {
$(this).data('dir', '');
},
drag: function( event, ui ) {
var dir = $(this).data('dir');
// If we don't have a direction, decide where we're going
if ((dir != 'y') && (dir != 'x')) {
var dy = ui.originalPosition.top - ui.position.top;
var dx = ui.originalPosition.left - ui.position.left;
dir = (Math.abs(dy) > Math.abs(dx))?'y':'x';
$(this).data('dir', dir);
}
if (dir == 'y') {
// Change the height
var ft = $('footer').position().top;
var fh = $('footer').height();
$('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
$('footer').css('top', ui.offset.top);
// Prevent the drag from happening
// ???
}
}
});
If you drag horizontally it'll prevent the resize from firing -- but I can't stop the drag from happening in that if clause. If I stop the event (return false
, or stopImmediatePropagation()
) then the drag gets cancelled and you drop the element, but I can't just change the position as I think the event above is going off before it's moved.
I may be missing an option on the jQuery-UI interface, hopefully that get's you closer. Might be worth a separate question just on the 'how can I stop the drag' -- someone else might also come up with a neater implementation.