draggable, sortable, resizable

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="container" style="border: 1px #ddd dotted; height:310px; width:100%">
  <div class="connectedsortable lane" style="float:left; width: 100px; height:310px;list-style-type: none;overflow:hidden">

  </div>
  
</div>

<br clear="all" />
<br />
<ul style="list-style-type:none;">
  <li id="wc1" class="workcenter" style="border:1px solid #000; float:left;padding:5px;margin:5px;text-align:center;width:80px;height:80px;font-size:11px;">
    <br />
    <br />WC1</li>
  <li id="wc2" class="workcenter" style="border:1px solid #000; float:left;padding:5px;margin:5px;text-align:center;width:80px;height:80px;font-size:11px;">
    <br />
    <br />WC2</li>
  <li id="wc3" class="workcenter" style="border:1px solid #000; float:left;padding:5px;margin:5px;text-align:center;width:80px;height:80px;font-size:11px;">
    <br />
    <br />WC3</li>
  <li id="wc4" class="workcenter" style="border:1px solid #000; float:left;padding:5px;margin:5px;text-align:center;width:80px;height:80px;font-size:11px;">
    <br />
    <br />WC4</li>
  <li id="wc5" class="workcenter" style="border:1px solid #000; float:left;padding:5px;margin:5px;text-align:center;width:80px;height:80px;font-size:11px;">
    <br />
    <br />Empty</li>
</ul>

JavaScript

$(document).ready(function() {
  $('.workcenter').draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    connectToSortable: ".lane",
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"
  });


  $('.lane').droppable({
    accept: ".workcenter",
    drop: function(event, ui) {
//      $('<div style="float:left;margin:5px;padding:5px;border:1px solid #000;width:70px;height:80px;" class="workcenter" ></div>')
        
//        .text(ui.draggable.text())

				var element = $(ui.draggable);
        element.resizable({
          resize: function(event, ui) {
            ui.size.width = 80;
            var blocks = Math.round(ui.size.height / 80);
            ui.size.height = blocks * 80;
            if (ui.size.height == 0) {
              ui.size.height = 80;
            } else if (blocks > 1) {
              if (blocks > 3) blocks = 3;
              ui.size.height = (80 * blocks) + (((blocks) * 22) - 22);
            }
          },
        });
        $(this).append(element);


    }
  });
  
  

  $('.lane').sortable({
    revert: false,
    connectWith: ".connectedsortable",
  })
  $('.lane').disableSelection();
});