JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<table>
  <tr>
    <td>
      <ul id="ctrlLibre" class="ctrlLibre" data-type="1">
      <li id="liCtrlLibre" data-type="1" class="liCtrlLibre">LIBRE 1</li>
      
  </ul>
    </td>
    <td>
    <ul id="ctrl" class="ctrl"  data-type="2">
  <li id="liCtrl" data-type="2" class="liCtrl">CTRL 1</li>
  <li id="liCtrl" data-type="2" class="liCtrl">CTRL 2</li>
  <li id="liCtrl" data-type="2" class="liCtrl">CTRL 3</li>
</ul>
    </td>
    <td><div id="content" class="content"  data-type="3">
<ul id="step1" data-type="3" class="step"><p>N°1</p>
</ul>
<ul id="step2" data-type="3" class="step"><p>N°1</p>
</ul>
</div>
    </td>    
  </tr>
</table>

CSS

.ctrlLibre li
{
  list-style-type: none;
  background-color: Green;
  width: 60px;
}
  
.ctrl li
{
  list-style-type: none;
  background-color: Red;
  width: 60px;
}
  
.step
{
  list-style-type: none;
  width: 100px;
  height: 100px;
  border: 1px solid Black;
}
  
#content, #ctrlLibre, #ctrl
{ 
  width: 150px;
  height: 250px;
  border: 1px solid Black; 
}

JavaScript

$(function(){
  
  $(window).load(function(){
  
  $('.ctrlLibre').sortable({
    connectWith: '.step',
    cursor: 'move',
    items: 'li',
    remove: function(event, ui) {
      ui.item.clone().appendTo('#ctrlLibre');
    },
    receive: function(event, ui){
      var cibleType = $(event.target).data('type');
      var elementType = $(ui.item).data('type');
      
      if(cibleType != 3 && cibleType != elementType){       
        $(ui.sender).sortable('cancel');        
      }else{
        ui.item.remove();
      }
    }
  });
  
  $('.ctrl').sortable({
    connectWith: '.step',
    cursor: 'move',
    items: 'li',
    receive: function(event, ui){
      var cibleType = $(event.target).data('type');
      var elementType = $(ui.item).data('type');
      
      if(cibleType != 3 && cibleType != elementType){       
        $(ui.sender).sortable('cancel');        
      }
    }
  });
  
  $('#content').sortable({
    cursor: 'move'
  });
 
  $('.step').sortable({ 
    connectWith: 'ul',
    items: 'li'  
  });
  
  $('#ctrlLibre, #ctrl, #content, .step').disableSelection();
 
});