JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="filemanager-0">
<div class="filemanager">
<div class="filemanager-container ui-sortable">
  <div class="panel-frame frame-active">
    <div class="panel-header">
      <ul class="nav nav-pills">
        <li class="dropdown" id="panel" 0="">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
            <i class="icon-star icon-white icon-w18"></i>
            Сообщения
            <b class="caret"></b>
          </a>
        </li>
      </ul>
      <input class="filter" type="text" value="фильтр">
    </div>
    <div class="button-set">
      <div class="btn btn-mini change-view view-list">
        <i class="icon-music"></i>
      </div>
      <div class="btn btn-mini change-view view-list">
        <i class="icon-picture"></i>
      </div>
      <div class="btn btn-mini change-view view-list">
        <i class="icon-file"></i>
      </div>
      <div class="btn add-point align-down">
        <i class="icon-plus"></i>
      </div>
    </div>
    <div class="panel-wrapper">
      <div class="panel ui-sortable ui-selectable" id="Сообщения">
        <div class="file-list">
          <i class="icon-music icon-white icon-w18"></i>
          vm-forward-multiple.gsm
          <div class="delete"></div>
        </div>
        <div class="file-list">
          <i class="icon-music icon-white icon-w18"></i>
          conf-placeintoconf.gsm
          <div class="delete"></div>
        </div>
        <div class="file-list">
          <i class="icon-music icon-white icon-w18"></i>
          vm-isunavail.gsm
          <div class="delete"></div>
        </div>
        <div class="file-list">
          <i class="icon-music icon-white icon-w18"></i>
          vm-next.gsm
          <div class="delete"></div>
        </div>
        <div class="file-list">
          <i class="icon-music icon-white icon-w18"></i>
          vm-tocallnum.gsm
          <div class="delete"></div>
    ...

CSS

.filemanager {
    /*background-color: #fefefe;
    border-left: 1px dotted #eee;*/
}

.filemanager .panel-wrapper {
    overflow-y: scroll;
    height: 150px;
    width: 297px;
    border-top: 1px solid #ddd;
}

.filemanager .panel {
    float: left;
    min-height: 146px;
    min-width: 273px;

    color: #555;
    background-color: #f5f5f5;
    padding: 2px;
    padding-left: 5px;
    
    margin: 0px;
    
    list-style: none;

    /*background-color:#F0F0F0;
    background-position:center center;
    background-image:url(grd-white.png) !important;
    background-repeat:repeat-x;
    background-size:100% 100%*/

    /*border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/

    /*box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.3);*/
}

.filemanager .panel-frame {
    /*margin-top: 10px;*/
    position: relative;
    float: left;
    
    margin: 1px;
    padding: 0px;
    
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background-color: #fafafa;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    border: 1px solid #dcdcdc;
    /*border: 2px solid #0088cc;*/
    
    display: inline-block;
    color: #666666;
}

.filemanager .frame-active {
    border: 2px solid #0088ff;
}

.filemanager .frame-inactive {
    border: 2px solid #ee0000;
}

.filemanager .nav {
    margin-bottom: 0px;
    margin-left: 5px;
    float: left;
}

.filemanager .panel-frame .panel-header {
    display: block;
    clear: both;
    color: #aaa;
    width: 330px;
    height: 36px;
}


.filemanager .panel-frame .name {
    padding-left: 15px;
    display: block;
    clear: both;
    color: #aaa;
}

.filemanager .panel-frame .info {
    padding-left: 15px;
    display: block;
   ...

JavaScript

$('.filemanager-0 .filemanager .panel').sortable({
    connectWith: '.panel',
    revert: false,
    opacity: 1,
    scroll: false,
    helper: 'clone',
}, stop: function(event, ui) {
    var from = ui.item.closest('.panel').attr('id');
    var to = from;
    alert(from);
},
receive: function(event, ui) {
    var from = ui.sender.closest('.panel').attr('id');
    var to = ui.item.closest('.panel').attr('id');
    alert(from + ' ' + to);
}
});
$('.filemanager-0 .filemanager .panel').selectable();
};