JSFiddle - React, Tailwind, and code Playground

HTML

<body style="cursor: auto;">
  <div id="list-A">
    <ul class="sortable2">
        <li class="ui-draggable">drag item 1</li>
        <li class="ui-draggable">drag item 2</li>
        <li class="ui-draggable">drag item 3</li>
        <li class="ui-draggable">drag item 4</li>
        <li class="ui-draggable">drag item 5</li>
        <li class="ui-draggable">drag item 6</li>
    </ul>
  </div>
</body>

CSS

li {
    border:1px dashed Gainsboro;
    background-color:cornflowerblue;
    color:FloralWhite;
    font-family:Cursive;
    display:inline-block;
    padding:8px;
    margin:2px;
}

ul {
    border:1px solid PowderBlue;
}

JavaScript

$('#list-A li').draggable({
    helper: 'clone'
});
$('#list-A ul').droppable({
    drop: function(event, ui) {
        if(ui.draggable.data('sorting'))
            return;
        $(this).append($(ui.draggable).clone());
    }
}).sortable({
    start: function(event, ui) {
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});