JSFiddle - React, Tailwind, and code Playground

HTML

<div  style="overflow: auto;-webkit-overflow-scrolling: touch;position: relative;" id ="container">
Dragging Mango to right below Blueberry, in the group ( red border ) causes a freakout.<br /><br />
<ul id="full-list222222">
    <li class="group">
        <div class="group-name">Fruit</div>
        <ul class="group-projects">
            <li class="project">Apple</li>
            <li class="project">Strawberry</li>
            <li class="project">Blueberry</li>
        </ul>
    </li>
    <li class="group">
        <div class="group-name">Vegetables</div>
        <ul class="group-projects">
            <li class="project">Aubergine</li>
            <li class="project">Broccolli</li>
            <li class="project">Lettuce</li>
        </ul>
    </li>

    <li class="project">Random</li>
    <li class="project">Mango</li>

</ul>
    <div>When dragging a sortable item to a new location, other items will make room for the that item by shifting to allow white space between them. Pass a class into the placeholder option to style that space to be visible. Use the boolean forcePlaceholderSize option to set dimensions on the placeholder.</div>
<ul id="full-list">
    <li class="group">
        <div class="group-name">Fruit</div>
        <ul class="group-projects">
            <li class="project">Apple</li>
            <li class="project">Strawberry</li>
            <li class="project">Blueberry</li>
        </ul>
    </li>
    <li class="group">
        <div class="group-name">Vegetables</div>
        <ul class="group-projects">
            <li class="project">Aubergine</li>
            <li class="project">Broccolli</li>
            <li class="project">Lettuce</li>
        </ul>
    </li>

    <li class="project">Random</li>
    <li class="project">Mango</li>

</ul>
</div>

CSS

body { padding: 25px; }
.project, .group-name { padding: 5px; background-color: #CCC; border: solid 1px #AAA; }
.group li { border: none; background-color: #FFF; padding-left: 25px; }
.group-projects { border: solid 1px #AA0000; }
.project, .group { cursor: ns-resize; }
#container{
    height: 400px
}

JavaScript

$('#full-list').sortable({

    items : '.group, .project'    
    
});