JSFiddle - React, Tailwind, and code Playground

by stevea

CSS

body{
    padding-top:30px;
    padding-left:30px;
}
.cellGrip_se {						/* cell_grip_style  */
    position:absolute;
    bottom:-20px; 
	right:-20px;
    width:20px; 		
	height:20px;
    background-color:blue;
}

JavaScript

$(function() {  // ready
    
    src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg'
    img$ = $('<img>')
				.attr({'src': src})
				.css({
					    display		: 'block',			 
                        left		: 30,    	
						top 		: 40,
						position	: 'absolute'		
					  })
				.appendTo('body');
				
			img$.resizable({handles : 'ne,se,sw,nw', aspectRatio : true}); 
			imgBox$ = img$.parent('.ui-wrapper');
			imgBox$.append("<div class='cellGrip_se'></div>");
            imgBox$.draggable({handle : '.cellGrip_se'})
				 
				  /*
				  	Below we override the overflow:hidden that droppable or draggable adds, 
					so we can offset the resize handles and drag them from outside the imgBox
				  */
			        .css({'overflow' : 'visible'});   
  
});