Drag, drop, resize

by Adrian Babb

HTML

<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">
<ul id="icon_menu">
  <li class="draggable"></li>
</ul>
<div class="droppable"></div>

CSS

#icon_menu {
  width: 200px;
  height: auto;
  float: right;
}

#icon_menu li {
  width: 45px;
  height: 45px;
  float: left;
  list-style: none;
}

.draggable {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(127, 214, 236, 0.5);
  list-style: none;
}

.droppable {
  width: 400px;
  height: 400px;
  border: 1px solid #000000;
  float: left;
}

.draggable.ui-resizable:after {
  content: attr(data-element-height);
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: .7em;
  background-color: #5f6a72;
  color: #ffffff;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}

JavaScript

$(document).ready(function($) {

  $(".droppable").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
      var $clone = ui.helper.clone();
      if (!$clone.is('.inside-droppable')) {
        $(this).append($clone.addClass('inside-droppable').draggable({
          containment: '.droppable',
          scroll: false,
          tolerance: 'pointer',
          position: 'relative',
        }));

        $clone.resizable({
          aspectRatio: 'true',
          ghost: 'true',
          handles: 'ne, nw, se, sw',
          maxHeight: 200,
          maxWidth: 200,
          minHeight: 30,
          minWidth: 30
        });
      }
    }
  });
  $(".draggable").draggable({
    helper: 'clone',
    revert: "invalid",
    scroll: false
  });
});

$('li.draggable').each(function() {
  $(this).attr('data-element-height', $(this).height());
});