JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<ul class="draglink">
    <li>link</li>
    <li>dropdown</li>
</ul>
<ul class="droplink">
    <li data-pos="0">
        <a href="#">link</a>
        <ul>
            <li data-pos="1"><a href="#">link</a></li>
        </ul>
    </li>
    <li data-pos="2"><a href="#">link</a></li>
</ul>

JavaScript

var l = 0;

function updateLink() {
    $('.droplink li').each(function() {
        $(this).attr({'data-pos': l})
        l++;
        
        //if($(this).has("ul").length) {
           //$(this).find('li').css('color','red'); 
        //}
    });
};

$('.draglink li').draggable({
    connectToSortable: '.droplink'
});

$('.droplink').sortable({
    update: function (event, ui) {
        updateLink();
    }
});