JSFiddle - React, Tailwind, and code Playground

by Frédéric Rau

HTML

<!-- colonne 1 -->
<div class="column colonne1" id="colonne1">
COLONNE 1
</div>

<!-- colonne 2 -->
<div class="column colonne2" id="colonne2">
    COLONNE 2
</div>

<!-- modules -->
<div class="modules" id="modules">
MODULES
<div class="portlet module" id="port_1"><div class="portlet-header">actualités</div></div><div class="portlet module" id="port_2"><div class="portlet-header">évènements</div></div>
 </div>

<!--script-->
<div class="script" id="scriptcolonne1"></div>
<div class="script" id="scriptcolonne2"></div>

CSS

.column, .modules {
    background-color:#EEEEEE;
    margin:10px;
    padding:10px;
}
.modules {
    background-color:#EEEECC;
}
.portlet {
    padding:10px; 
background-color:#CCCCCC;
    margin-bottom:10px;
}
.portlet-header {
    background-color:#CCCCCC;
        cursor:all-scroll;
}

.portlet-placeholder {
    border:1px solid #CCCCCC;
    padding:10px;
    height:20px;
    display:block;
    margin-bottom:10px;
}

.script {
    border:1px solid #CCCCCC;
    margin:10px;
    padding:10px;
}

JavaScript

$(document).ready(function() {
  
  $(".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      placeholder: "portlet-placeholder",
      update : function (event,ui) {
      		var pere=$(this).attr('id');
       		var data = $(this).sortable('serialize');
            $("#script"+pere).html("process-sortable.php?zone="+pere+"&"+data);
      }
  	
    });
    
   $(".module").draggable({
      connectToSortable: ".column",
      helper: "clone",
      revert: "invalid"
   });
 });