JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="items-list">
    <ul class="items">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</div>
<div class="sortable-block">
    <div class="sortable-header">Sortable 1</div>
    <ul id="sortable1" class="sortables">
        <div class="drop-here">Drag here</div>
    </ul>
    <div class="sortable-header">Sortable 2</div>
    <ul id="sortable2" class="sortables">
        <div class="drop-here">Drag here</div>
    </ul>
</div>

CSS

.items-list {
    border:1px solid green;
    width:48%;
    float:left;

}
.items-list li {
    cursor:pointer;
}

.sortable-block {
    border:1px solid blue;
    width:48%;
    float:right;
}
.sortables {
    min-height:50px;
    /*border:1px solid yellow;*/
}

.drop-here {
    /*border:1px solid red;*/
    padding:20px;
    /*text-align:center;*/
}
.widget-hover, .place_holder {
    border:1px solid lightblue;
}

JavaScript

$("#sortable1, #sortable2").sortable({
    connectWith: ['.items li','.sortables'],
    placeholder: 'place_holder',
    helper: "clone",
    
    over: function() {
        alert('over');
    },
    
})
.disableSelection();

$( ".items li" ).draggable({
    connectToSortable: ".sortables",
    appendTo: "body",
    helper: "clone",
}).disableSelection();