JSFiddle - React, Tailwind, and code Playground
HTML
<div id="drawarea">
<div class="rect-container h">
<div class="rect"></div>
</div>
</div>
CSS
.rect-container {
position:relative;
background-color:green;
}
.h {
width:120px;
height:80px;
}
.v {
width:80px;
height:120px;
}
.rect {
width:120px;
height:80px;
background-color:pink;
position:relative;
}
#drawarea {
background-color:lightblue;
width:400px;
height:400px;
}
/* Rotating classes */
.r90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
top: 20px;
left: -20px;
}
.r180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.r270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
top: 20px;
left: -20px;
}
JavaScript
$(function() {
// Make div draggable
$("#drawarea .rect-container").draggable({
snap: false,
grid: [20, 20],
containment: "#drawarea"
});
// Double click to rotate
$("#drawarea .rect").live("dblclick", function() {
var width = 120;
var height = 80;
if ($(this).hasClass("r90")) {
$(this).removeClass("r90");
$(this).addClass("r180");
$('.rect-container').toggleClass('h');
$('.rect-container').toggleClass('v');
} else if ($(this).hasClass("r180")) {
$(this).removeClass("r180");
$(this).addClass("r270");
$('.rect-container').toggleClass('h');
$('.rect-container').toggleClass('v');
} else if ($(this).hasClass("r270")) {
$(this).removeClass("r270");
$('.rect-container').toggleClass('h');
$('.rect-container').toggleClass('v');
} else {
$(this).addClass("r90");
$('.rect-container').toggleClass('h');
$('.rect-container').toggleClass('v');
}
});
});