title: Multiple element drag, resize, rotate and delete
body: <p>I want to create a simple "let's build a look" tool which basically allows a user to drag a div (with an image inside) on to a target area, resize it, rotate it or delete it and do the same with several other elements.</p>
  
  <p>I can create the drag part to all elements and also resize one element but can't do it do more than one.</p>
  
  <p>Here's what I have (I have copied partially the code from an example found here in Stackoverflow):</p>
  
  <pre><code>   $(document).ready(function() {
        //Counter
        counts = [0];
  
        $(".closeMe").hide();
  
        $(".dragImg").draggable({
          revert: "invalid",
          containment: "#droppable",
          helper: "clone",
          cursor: "move",
          start: function(event, ui) {
                  counts[0]++;
                  isDraggingMedia = true;
          },
          stop: function(event, ui) {
              isDraggingMedia = false;
          }
        });
  
        $("#droppable").droppable({
          accept: ".dragImg",
          drop: function(e, ui){
              if(ui.draggable.hasClass("dragImg"))
                   $(this).append($(ui.helper).clone());
              //Pointing to the dragImg class in dropHere and add new class.
              $("#droppable .dragImg").addClass("item-"+counts[0]);
              //Remove the current class (ui-draggable and dragImg)
              $("#droppable .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");       
  
              $("#droppable .item-"+counts[0]+" .closeMe").addClass("del-"+counts[0]);
  
  
              $(".item-"+counts[0]).click(function(){
                  $(".item-"+counts[0]+" .closeMe").show();
                  //$(".item-"+counts[0]).attr('class', 'ui-draggable-helper');
                  $(".item-"+counts[0]+" img").resizable({
                      aspectRatio: true
                  });
  
              });   
  
              make_draggable($(".item-"+counts[0]));              
          }
        });
  
        var zIndex = 0;
        function make_draggable(elements){   
              elements.draggable({
                  containment:'#droppable',
                  start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
                  stop:function(e,ui){}
              });
        }
  
    });
  </code></pre>
  
  <p>What I can not do is to achieve resize to every element or even have found a decent way to rotate them or delete them. </p>
  
  <p>I want to click to select and show handles that allow resize, rotate and select and also when clicking outside the element, the handles should disappear.</p>
  
  <p>How can i do this ?</p>