JSFiddle - React, Tailwind, and code Playground

HTML

<div class="BereichHeader">Bereich 1</div>
<ul id="ul1" class="connectedSortable">
    <li class="ui-state-default">Item 1.1</li>
    <li class="ui-state-default">Item 1.2</li>
    <li class="ui-state-default">Item 1.3</li>
    <li class="ui-state-default">Item 1.4</li>
    <li class="ui-state-default">Item 1.5</li>
    <li class="ui-state-default">Item 1.6</li>
</ul>
 <div class="BereichHeader">Bereich 2</div>
<ul id="ul2" class="connectedSortable">
    <li class="ui-state-highlight">Item 2.1</li>
    <li class="ui-state-highlight">Item 2.2</li>
    <li class="ui-state-highlight">Item 2.3</li>
    <li class="ui-state-highlight">Item 2.4</li>
    <li class="ui-state-highlight">Item 2.5</li>
    <li class="ui-state-highlight">Item 2.6</li>
</ul>
<div class="BereichHeader">Bereich 3</div>
<ul id="ul3" class="connectedSortable">
    <li class="ui-state-default">Item 3.1</li>
    <li class="ui-state-default">Item 3.2</li>
    <li class="ui-state-default">Item 3.3</li>
    <li class="ui-state-default">Item 3.4</li>
    <li class="ui-state-default">Item 3.5</li>
    <li class="ui-state-default">Item 3.6</li>
</ul>

CSS

.connectedSortable { list-style-type: none; margin: 0; padding: 0; height:250px; }
.connectedSortable li {
    font-size: 1.2em;
    margin: 0 5px 5px;
    padding: 5px;
    width: 120px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #E6E6E6;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #FBF9EE;
    border: 1px solid #FCEFA1;
    color: #363636;
}
.BereichHeader{
    background: #E6E6E6;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
    padding: 5px;
    margin:5px 0px;
    font-size: 1.5em;
}

JavaScript

$(function() {
    $( ".connectedSortable" ).sortable({
        connectWith: ".connectedSortable",
        update: function(event, ui) {
            var ul1 = $("#ul1 li");
            var ul2 = $("#ul2 li");
            var ul3 = $("#ul3 li");
    
            checkul1(ul1, ul2, ul3);
            checkul2(ul1, ul2, ul3);
            checkul3(ul1, ul2, ul3);
        }
    }).disableSelection();
});

function checkul1(ul1, ul2, ul3) {
    if (ul1.length > 6) {
        ul1.last().prependTo(ul2.parent());
    }
}

function checkul2(ul1, ul2, ul3) {
    if (ul2.length > 6) {
        if (ul1.length < 6) {
            ul2.first().appendTo(ul1.parent());
        } else {
            ul2.last().prependTo(ul3.parent());
        }
    }
}

function checkul3(ul1, ul2, ul3) {
    if (ul3.length > 6) {
        ul3.first().appendTo(ul2.parent());
        checkul2(ul1, ul2, ul3);
    }
}