JSFiddle - React, Tailwind, and code Playground

by murat_usenbai

HTML

<div id="sortable">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
    <div>Tab 4</div>
    <div>Tab 5</div>
</div>

CSS

#sortable {
    padding: 2px;
    font-size: 12px;
    border: 1px solid #aaa;
    max-width: 250px;
}
#sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 2px;
    background: #fff;
    border: 1px solid #aaa;
    cursor: move;
}

JavaScript

$('#sortable').sortable({
    sort: function (event, ui) {
        var list = $(this),
            w = ui.helper.outerWidth(),
            h = ui.helper.outerHeight();

        list.children().each(function () {
            if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) {
                return true;
            }
            
            var currElementHeight = $(this).outerHeight(),
                overlap = $(this).position().top + currElementHeight - ui.position.top,
                placeBefore = ui.position.top > $(this).position().top;
            
            if (overlap > 0 && overlap < currElementHeight) {
                if (placeBefore)
                    $('.ui-sortable-placeholder', list).insertBefore($(this));
                else
                    $('.ui-sortable-placeholder', list).insertAfter($(this));
                return false;
            }
            
            if ($(this).position().left + $(this).outerWidth() < ui.position.left) {
                console.log('out');
                //ui.item.parent().sortable('cancel');
            }
            
        });

    },
});