JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="toolbar1" class="toolbar">
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
</ul>
<ul id="toolbar2" class="toolbar">  
</ul>

CSS

.toolbar{
    border:1px solid black;
    background:#BBBBBB;
    width:410px;
    height:100px;
    margin:20px;
}
.icon{
    border:1px solid black;
    background:#0000FF;
    height:80px;
    width:80px;
    margin:10px;
    float:left;
}
.deleteMe{background:#FF0000}

JavaScript

var deleteClass="deleteMe";

$('#toolbar1, #toolbar2').sortable({
    connectWith: 'ul.toolbar',
    items: 'li',
    revert: true,
    opacity: .5,    
    out: function(event, ui){ui.item.addClass(deleteClass);},                                   
    over: function(event, ui){ui.item.removeClass(deleteClass);}
 });