Draggable, Rotatable, Resizable
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<script src="https://raw.github.com/MadLittleMods/jQuery-Scripts/master/jquery.ui.rotatable.js"></script>
<div class="draggable">
<div class="rotatable">
<div class="resizable">
<img src="http://store.valvesoftware.com/images/sizing_chart_shirt.png" alt="" />
</div>
</div>
</div>
CSS
.draggable
{
position: relative;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
cursor: hand;
cursor: pointer;
}
.resizable
{
width: 100px;
border: 1px solid #bb0000;
}
.resizable img
{
width: 100%;
}
.ui-resizable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
.ui-resizable-se
{
right: -5px;
bottom: -5px;
}
.ui-rotatable-handle
{
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
visibility: hidden;
}
JavaScript
$('.draggable').draggable();
$('.resizable').resizable({
aspectRatio: true,
handles: 'ne, se, sw, nw'
});
$('.resizable').parent().rotatable();