JSFiddle - React, Tailwind, and code Playground

HTML

<div>Draggable source items
    <ul>
        <li class="draggable" class="ui-state-highlight">Drag me down</li>
        <li class="draggable" class="ui-state-highlight">Drag me down 2</li>
                <li class="draggable" class="ui-state-highlight">Drag me down 2</li>

    </ul>
</div>
<div>Sortable List 1
    <ul class="sortableList">
        
    </ul>
</div>
<div class="test droppableArea">
     <!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
    <p> REMOVE THE ITEM FROM SORTABLE LIST IF IT'S DRAGGED HERE </p>
</div>

CSS

div {
    border:1px solid red;
}
.sortableList {
    height:100px;
    border:1px solid red;
}
.test { background:red;height:200px;}

JavaScript

$(document).ready(function () {
    $(".sortableList").sortable({
        //revert: true,
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/
    });
    $(".draggable").draggable({
        connectToSortable: '.sortableList',
        cursor: 'pointer',
        helper: 'clone',
        revert: 'invalid'
    });
    
    $('.droppableArea').droppable({
        accept: 'li',
        drop: function(event, ui) {
            ui.helper.remove();
        }
    });
});