JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="left-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <ul id="right-list">
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>
 
</div>

CSS

#left-list, #right-list {float: left; cursor: pointer;}
#left-list li, #right-list li {display: block; border: 1px solid #bada55;}

JavaScript

$(function(){
$("#left-list").sortable({
    connectWith: ['#right-list'],
    scroll: true,
    placeholder: 'ui-state-highlight',
    start: function(){
        console.log('drag');
    },
    stop: function(e){
        console.log('drop');
        //e.stopImmediatePropagation();
    }
});
    
$("#right-list").sortable({ 
    connectWith: ['#left-list'],
    helperclass: 'dragged',
    scroll: true,
    placeholder: 'ui-state-highlight',
    start: function(e){
        console.log('drag');
        //e.stopImmediatePropagation();
    },
    stop: function(e){
        console.log('drop');
        
    }
});


$("ul").delegate('li', 'click', function(){ 
    console.log('click');
    var originalList = $(this).parent().attr('id');
    switch(originalList){
        case 'left-list':
            $('#right-list').append(this);
            break;

        case 'right-list':
            $('#left-list').append(this);
            break;
    }
});
});