Resizable handle is blocking draggable interaction

Question

Inside of a container I have a div that is draggable along the x-axis only. I want the user to have the ability to resize the container by clicking anywhere inside and dragging vertically. In order to accomplish this I set the height of the handle for the resizable method to be 100% of the container height. The resize works as desired, but now the draggable interaction is blocked due to the size of the handle. I think it's possible to accomplish this type of resize without using the built in resizable method, but I haven't come up with an elegant solution.

Fiddle: http://jsfiddle.net/LuLd9/

HTML:

<footer>
    <div id="queue">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</footer>

JS:

$('#queue').draggable({
   axis: 'x',
   scroll: false
});

$('footer').resizable({
    handles: 'n'
});

CSS:

#queue {
    overflow: visible;
    height: 100%;
    border: 1px solid red;
    z-index: 1;
}
footer {
    position: relative;
    height: 20%;
    top: 60%;
    overflow: hidden;
    border: 1px solid black;
}
.child {
    display: inline-block;
    height: 80%;
    width: 15%;
    border: 1px solid black;
}
.ui-resizable { position: relative;}
.ui-resizable-n { cursor: n-resize; height: 100%; width: 100%; top: -5px; left: 0; }

Answer 1

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);
    }    
});

Fiddle

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
          // ??? 

       }
    }    
});

Fiddle

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.