resizing with native javascript

gistfile1.js

 
  
    
////////////////save picture 


function save(dataURL){
  alert("do you want to save?");
  // console.log(dataURL);

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){//the file of the images
            console.log(msg);
          $('#mypanel').prepend('<div class= "dragImg"><img id="theImg" class="theImg" height= "100%" width= "100%" src="'+msg+'"/></div>');//path of new images and appending them to panel 
            
 
 
 $(function(){  
 //Make every clone image unique.  
   var counts = [0];
    var resizeOpts = { 
      handles: "all" ,autoHide:false
    };    
   $(".dragImg").draggable({
                         helper: "clone",
                         
                         //Create counter
                         start: function() { counts[0]++; }
                        });

$("#dropHere").droppable({
       drop: function(e, ui){
               if(ui.draggable.hasClass("dragImg")) {
                 
                 var newUI = $('<div>');
                 newUI.append(ui.draggable.children('img').eq(0).clone());
                 //ui.draggable.remove();
                 
                 
                 /*
                   
                   */
                 
     //$(this).append($(ui.helper).clone().css('z-index','999999'));
  $(this).append(newUI);
     console.log("clone dropped");
   
   //Pointing to the dragImg class in dropHere and add new class.
         newUI.addClass("item-"+counts[0]);
         newUI.css('position','absolute');
         newUI.css('display','block');
         newUI.css('top','20px');
         newUI.css('left','300px');
         newUI.css('z-index','999999');
         make_draggable(newUI);
            newUI.addClass("imgSize-"+counts[0]);
            console.log("adding new ");
                
   //Remove the current class (ui-draggable and dragImg)
         //$("#dropHere .item-"+counts[0]).removeClass("dragImg");
         //$("#dropHere .item-"+counts[0]).removeClass("ui-draggable");
         $("#dropHere .dragImg").removeClass("ui-draggable-dragging");
         


$(".item-"+counts[0]).tap(function() {
$(this).remove(); 
});
// console.log("about to make resizable"); 
//make_draggable($("item-"+counts[0])); 
newUI.resizable(resizeOpts);
$("imgSize-"+counts[0]).resizable(resizeOpts);

  console.log("making resizable");
 
      



      }
        var el = document.createElement("div");
        
        
        
      }
      
      });






var zIndex = 0;
function make_draggable(elements)
{ 
  elements.draggable({
    containment:'parent',
    start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
    stop:function(e,ui){
    }
  });

   
}    
if (touchStart, touchmove, touchend == true){
  event.preventDefault();
}

    
   });  
       
    
        },
        
        function(err){
            console.log(err);
            
        },
       
        document.getElementById('can')
    );

      alert("hi");
}