JSFiddle - React, Tailwind, and code Playground

by Rychard Goltara

HTML

<div class ="contornoArredondadoTabelas contornoQT">
<table class="tabelaQT" id="taskboard" style="position:relative;">
<thead class="headerQT"></thead>
<tbody data-bind="visible:historia().length == 0" style ="display:none;"></tbody>
<tbody data-bind="visible:historias().length > 0, foreach:{afterRender: function(elements, data);{Sh.model.addMetaDataAfterRender(elements,data);}, data:historias}, selection: {enabled : true, lastclicked : historiaSelecionada, selectionClass : 'selecionada' , asmap : true}" style>
  <tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
    <td class ="historia" style="height:1px">
      <div class="colapsada" style="display:none;">
      </div>
      <div class="expandida">
        <div class="historiaLayout">
          <span id=""></span>
        </div>
      </div> 
     </td>
      <!-- ko foreach: {data: $root.fases, as : 'fase'} -->      
   <td data-bind="css : 'fase-' + id" class="fase-7">
     <div class="colapsada"></div>
     <div class="expandida tarefaExpandida">
       <div class="nomeFase fase">
						<span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
					
          <div class="conjuntoTarefas ui-container ui-droppable" data-bind="droppable: {data: $parents[0][$index()], options : {accept: $root.acceptDrop, activeClass : 'areaMarcadaConjuntoTarefas', hoverClass : 'areaMarcadaHoverConjuntoTarefas'},beforeMove: function(args) {SH.utils.queue('taskboard',args.item);SH.model.models.taskboardVM.tarefaSelecionada().loading(true);arguments[1] = { params : [{name : 'taskboard_drop_tarefa', value : args.item.sequencial}, {name: 'taskboard_drop_origem', value : $(args.sourceParentNode).attr('id')}, {name: 'taskboard_drop_destino', value : $(args.targetParentNode).attr('id')}, {name: 'taskboard_drop_historia', value :  ko.utils.domData.get($(args.sourceParentNode).closest('tr').get(0), 'ko_sortItem').sequencial}...

CSS

.contornoQT {
			-webkit-user-select: none;
			user-select: none;
			-o-user-select:none;
			-moz-user-select: none;
			-khtml-user-select: none;
		}
    		.tabelaQT {
			border-collapse:collapse;
			table-layout:fixed;
			width: 100%;
		}
    .tabelaQT tbody tr td {
    border-right: 1px #ccc solid;
    height: 100%;
}
.tarefaExpandida {
    margin: 5px;
    overflow: auto;
    height: 100%;
}
.nomeFase {
    display: none;
    white-space: nowrap;
    font-size: 18px;
    width: 100%;
    }
    .conjuntoTarefas {
    overflow: visible;
    height: calc(100% - 22px);
    height: -webkit-calc(100% - 22px);
    height: -moz-calc(100% - 22px);
    padding-bottom: 10px;}
    .tarefaLayout, .tarefaLayout.ui-draggable {
    height: 80px;
    width: 150px;
    cursor: pointer;
    cursor: grab;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    border-radius: 1px;
    margin: 5px;
    float: left;
    font-size: 12px;
    position: relative;}
    .tarefa {
    border: 1px #d7da00 solid;
    color: #565100;
    background: #fffbc2;
    background: -moz-linear-gradient(top,rgba(255,251,194,1) 0,rgba(245,233,133,1) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,251,194,1)),color-stop(100%,rgba(245,233,133,1)));
    background: -webkit-linear-gradient(top,rgba(255,251,194,1) 0,rgba(245,233,133,1) 100%);
    background: -o-linear-gradient(top,rgba(255,251,194,1) 0,rgba(245,233,133,1) 100%);
    background: -ms-linear-gradient(top,rgba(255,251,194,1) 0,rgba(245,233,133,1) 100%);
    background: linear-gradient(to bottom,rgba(255,251,194,1) 0,rgba(245,233,133,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbc2',endColorstr='#f5e985',GradientType=0);
}

.ui-draggable {
    cursor: move;
}