JSFiddle - React, Tailwind, and code Playground

by Weylin

HTML

<div class="coll">Бобр Фантом</div>

<table style="width: 100%">
  <tr>

    <td>

      <table class="matrix">
        <tr>
          <td colspan="2" rowspan="2" style="width: 50px; border-width: 0px 1px 1px 0px;"></td>
          <td colspan="5" rowspan="1" style="height: 50px; background-color: #eeeeee;">Достижение целей</td>
        </tr>
        <tr>
          <td class="obj_mark">C1</td>
          <td class="obj_mark">B-</td>
          <td class="obj_mark">B</td>
          <td class="obj_mark">B+</td>
          <td class="obj_mark">A</td>
        </tr>
        <tr>
          <td rowspan="3" style="width: 25px; background-color: #eeeeee;">
            <span style="">Потенциал</span>
          </td>
          <td class="comp_mark">1</td>
          <td class="active_cell">
            <div class="coll">Жирова И.А.</div>
          </td>
          <td class="active_cell">
            <div class="coll">Петров В.В.</div>
          </td>
          <td class="active_cell"></td>
          <td class="active_cell"></td>
          <td class="active_cell"></td>
        </tr>
        <tr>
          <td class="comp_mark">2</td>
          <td class="active_cell">
            <div class="coll">Калинин В.В.</div>
          </td>
          <td class="active_cell"></td>
          <td class="active_cell">
            <div class="coll">Сидоров В.В.</div>
          </td>
          <td class="active_cell"></td>
          <td class="active_cell"></td>
        </tr>
        <tr>
          <td class="comp_mark">3</td>
          <td class="active_cell"></td>
          <td class="active_cell x"></td>
          <td class="active_cell"></td>
          <td class="active_cell"></td>
          <td class="active_cell"></td>
        </tr>
      </table>

    </td>
  </tr>
</table>

CSS

table.matrix {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}

table.matrix td {
  border: 1px solid #cccccc;
  text-align: center;
  vertical-align: middle;
}

table.matrix td.obj_mark {
  background-color: #92d050;
  height: 20px;
}

table.matrix td.comp_mark {
  background-color: #92d050;
  width: 20px;
}

table.matrix td.active_cell {
  min-height: 200px;
  height: 100px;
  width: 18%;
  vertical-align: top;
  position: relative;
}

.coll {
  background-color: #d6edbc;
  border: 1px solid #92d050;
  border-radius: 3px;
  text-align: center;
  height: 20px;
  ~min-width: 70%;
  width: auto;
  padding: 3px 2px;
  margin: 3px 1px;
  cursor: move;
  position: relative;
  z-index: 1000;
}

.test_cell {
  width: 100px;
  height: 100px;
  background-color: #999999;
  margin: 5px;
}

JavaScript

$(function() {
 

  $('td.active_cell').droppable({
    accept: 'div.coll'
  }).sortable({
    connectWith: "td.active_cell",
    tolerance: 'pointer'
  });

  //$('.active_cell').droppable();

  $('.active_cell.x').append($('<div class="coll">Некто в шляпе</div>'))
});