JSFiddle - React, Tailwind, and code Playground

by Turi S

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="rightList_Container" class="section-frame span6">
  
  <ul id="rightList" class="connectedList ui-sortable">
    
    <li id="sortableItem_0" class="sortableList-item">
      <img src="http://placehold.it/100x100" data-parent="sortableItem_0" />
    </li>
      
    <li id="sortableItem_1" class="sortableList-item">
      <img src="http://placehold.it/100x100" data-parent="sortableItem_1" />
    </li>
      
    <li id="sortableItem_2" class="sortableList-item">
      <img src="http://placehold.it/100x100" data-parent="sortableItem_2" />
    </li>
    
    <li id="sortableItem_2" class="sortableList-item">
      <img src="http://placehold.it/100x100" data-parent="sortableItem_2" />
    </li>
    
    <li id="sortableItem_2" class="sortableList-item">
      <img src="http://placehold.it/100x200" data-parent="sortableItem_2" />
    </li>
    
    <li id="sortableItem_2" class="sortableList-item">
      <img src="http://placehold.it/100x100" data-parent="sortableItem_2" />
    </li>
      
  </ul>
        
  <div class="clear"></div>
    
</div>

CSS

.ui-state-highlight {
    height: 100px;
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sortableList-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
}

.sortableList-item img {
    display: block;
}

.clear {
    clear: both;
}

JavaScript

$('#rightList').sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.connectedList',
    dropOnEmpty: true
});