JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<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;
}
.redbox{
    background:#FF0000
}

JavaScript

$('.toolbar').sortable({
    connectWith: '.toolbar',
    out: function(event, ui){
        ui.item.addClass('redbox');
    },                                   
    over: function(event, ui){
        ui.item.removeClass('redbox');
    }
 });