JSFiddle - React, Tailwind, and code Playground
by pradeep
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script src="http://www.google.com/jsapi"></script>
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.js"></script>
<div id="drag1" class="drag" style="background-position:center;"><img class="img" width="100" src="http://pngimg.com/upload/book_PNG2116.png" /></div>
<div id="drag2" class="drag" style="background-image:url(http://www.bradleysbookoutlet.com/wp-content/uploads/2013/06/bradleys-book-outlet-books-only-logo.png); background-position:center;" ></div>
<div class="col" id="droppable">
</div>CSS
.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:500px;
height:820px;
border:1px solid #CCC;
float:left;
}
.drag{
width:100px;
height:100px;
position:relative;
background-size:contain !important;
background-repeat:no-repeat;
float:left;
margin-left:10px;
margin-top:30px;
border:solid 1px #CCC;
}
.drag:hover{
opacity: 0.6;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#droppable{
width:520px;
min-height :320px;
border:1px solid #CCC;
}
#droppable .drag{
width:200px;
height :220px;
background-size:200px;
border:none;
}
#droppable .drag img{
width:100%;
height:100%;
z-index:0;
}
.drag2 {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.new-class{
width:200px;
height :220px;
background-size:200px;
border:solid 4px #666;
}
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n{
top: -10px;
left:50%;
width: 6px;
height: 6px;
}
.ui-resizable-e
{
right:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-s
{
bottom: -10px;
left: 50%;
width:6px;
height: 6px;
}
.ui-resizable-w
{
left:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-nw
{
left: -10px;
top: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-ne
{
top: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-sw
{
bottom: -10px;
left: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-se
{
bottom: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-helper {
border: 1px dotted #CCC;...JavaScript
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
stack: '.drag',
revert: "invalid"
});
$("#droppable").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit',
stack: '.drag'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
$(document).click(function(e) {
// matches all children of droppable, change selector as needed
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest(".drag").find(".ui-resizable-handle").show();
$("#tools").show();
}
else {
$("#droppable").find(".ui-resizable-handle").hide();
$("#tools").hide();
}
});
$(function(){
$('#flip').click(function(e){
$('#droppable .img').addClass('drag2');
});
});