JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

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

CSS

body {
	margin: 0;
	overflow-y: hidden;
	height: 400px;
    border: 1px solid black;
}

#queue {
    position: relative;
	overflow: visible;
	height: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
    border: 1px solid red;
	z-index: 1;
}

footer {
    position: absolute;
	height: 20%;
    width: 100%;
    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-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 100%; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}

JavaScript

$('#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
          // ??? 
       }

    }    
});