Jquery UI sortable detects axis up and down

Question

I am struggling to detect if axis N is moving up or down? and also i want the objects (h2 and p) inside, stay on the position. Can someone help please!

http://jsfiddle.net/zerolfc/y62awe4u/2/

<div class="ss-zone-object" style="top: 68px; width:300px; height: 500px; left: 20px;">
    <h2 style="top: 100px; width: 60px;">Title</h2>
    <p style="left: 122px; top: 120px; width: 60px;">Summary</p>
</div>

 $(function () {
    $('.ss-zone-object').resizable({
        grid: [1, 1],
        handles: 'n,s',
        resize: function (e, ui) {
            var handle_axis = $(this).data('ui-resizable').axis;

            $(this).find('h2, p').each(function (mk, mv) {

                var obj_top = parseInt($(this).position().top);
                if (handle_axis === 'n') { // Axis N, moving down then minus one
                    $(this).css('top', (obj_top - 1) + 'px');
                } else if (handle_axis === 's') {

                }
            });

        },
        stop: function (e, ui) {}
    });
});

Answer 1

i managed to do it by adding temporary clone div.

http://jsfiddle.net/zerolfc/y62awe4u/9/

$('.ss-zone-clone').resizable({
        grid: [1, 1],
        handles: 'n,s',
        containtment: 'parent',
        start: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                    'z-index': 1
            });
        },
        resize: function (e, ui) {
            var handle_axis = $(this).data('ui-resizable').axis;
        },
        stop: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                    'z-index': 0
            });

            var h2_top = $('.ss-zone-object').find('h2').position().top;

            var orig_top = ui.originalPosition.top;
            var cur_top = ui.position.top;
            var new_top;

            new_top = (cur_top - orig_top);

            $('.ss-zone-object').css({
                'height': ui.size.height + 'px',
                    'top': cur_top + 'px'
            });

            $('.ss-zone-object').find('h2').css('top', (h2_top - new_top));

        }
    });