JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<table>
<tr>
<td id ="sortable">
    <div class="ImageDiv">1</div>
    <div class="ImageDiv">2</div>
    <div class="ImageDiv">3</div>
    <div class="ImageDiv">4</div>
    <div class="ImageDiv">5</div>
    <div class="ImageDiv">6</div>
    <div class="ImageDiv">7</div>
    <div class="ImageDiv">8</div>
    <div class="ImageDiv">9</div>
    <div class="ImageDiv">10</div>
    <div class="ImageDiv">11</div>
    <div class="ImageDiv">12</div>
    <div class="ImageDiv">13</div>
</td>
</tr>
</table>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }
.ImageDiv
{
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 4px 4px 4px 4px;
box-shadow: 2px 2px 2px #CCCCCC;
display: block;
float: left;
min-height: 40px;
margin-bottom: 5px;
margin-right: 5px;
padding: 7px;
min-width: 40px;
}
.cartProductImageDiv1
{
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 4px 4px 4px 4px;
box-shadow: 2px 2px 2px #CCCCCC;
float: left;
height: 40px;
margin-bottom: 5px;
margin-right: 5px;
padding: 7px;
width: 40px;
}
.selectedDiv
{
border:1px solid #3399FF;
}

JavaScript

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if(!ui.item.data('tag') && !ui.item.data('handle')) {
            ui.item.data('tag', true);
            //ui.item.fadeTo(400, 0.1);
        }
    }
});
$('.ImageDiv').live('click', function (eve) {
   if (eve.ctrlKey || eve.metaKey) {
         $(this).toggleClass('selectedDiv');
    }
});