JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row head">
        <div class="col-md-2 otdh">Отдел</div>
        <div class="col-md-8">Кабинеты</div>
        <div class="col-md-2">Номера телефонов</div>
    </div>
    <div class="row bod">
        <div class="col-md-2 otdb">
            <p>отдел1</p>
        </div>
        <div class="col-md-8 kabinets">

            <ul class="kabinet connectedSortable" data-place_name='№1202'>
                <p class="ui-state-disabled">№1202</p>
            </ul>
            <ul class="kabinet connectedSortable" data-place_name='№1204'>
                <p class="ui-state-disabled">№1204</p>
            </ul>
            <ul class="kabinet connectedSortable" data-place_name='№1205'>
                <p class="ui-state-disabled">№1205</p>
            </ul>
        </div>
        <div class="col-md-2">
            <ul class="telNo connectedSortable"  data-place_name="listTel">
                <li>49283</li>
                <li>49340</li>
                <li>49341</li>
            </ul>
        </div>
    </div>

</div>

CSS

body {
    font: 9pt Arial, sans-serif;
}

p {
    color: #888;
    margin: 8px 0 12px 0;
    font-weight: 700;
    font-size: 18pt;
}

.head {
    border-bottom: solid #062c33 2px;
}

.otdh {
    border-right: solid #004085 1px;
}

.otdb {
    padding-top: 10px;
    text-transform: uppercase;
    font-weight: 700;
    border-right: solid #004085 1px;
}

.connectedSortable {
    float: left;
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 10px 5px;
    width: 100%;
    background-color: #ddd
}

.connectedSortable li {
    margin: 3px;
    padding: 0.4em;
    font-size: 1.4em;
    /*height: 18px;*/
    background-color: #fff;
    border: 1px solid #888
}
.kabinets ul{
    margin: 0 20px 0 0;
    border-bottom: solid white 10px;
}
.kabinet{
    top: 10px;
    width: 50%;
}

JavaScript

$(".kabinet").sortable({
        cancel: "p"
    }).disableSelection();
    $(".kabinet").sortable({
        items: "li:not(.ui-state-disabled)"
    }).disableSelection();
    $(".telNo, .kabinet").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection(); // для отмены выделения текста на элементах
    $(".dropfalse").sortable("option", "dropOnEmpty", false);
 $('telNo,.kabinet').droppable({
drop: function (ev, ui) { 
	console.log('номер  %s     положил в %s', ui.helper.html(), ev.target.closest('[data-place_name]').dataset['place_name']);
},
out: function (ev, ui) {
  document.querySelector('.col-md-2 ul').appendChild(ev.target.querySelector('li[style*="hidden"]'));
	console.log('взял в  %s     номер  %s', ev.target.closest('[data-place_name]').dataset['place_name'], ui.helper.html());
}
});