JSFiddle - React, Tailwind, and code Playground
HTML
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
CSS
.paper-area {
border: 1px solid #E4E3E3;
height: 290px;
width: 400px;
}
.upload-logo {
background: none repeat scroll 0 0 #626262;
color: #7B7B7B;
height: 98px;
text-shadow: 1px 1px 2px #FFFFFF;
width: 99px;
}
JavaScript
$(".drag").draggable({
containment: ".paper-area",
start: function(e, ui) {
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
$(this).css({
// position: "relative",
});
},
}).resizable({
containment: ".paper-area",
start: function(e, ui) {
// alert($(".paper-area").width());
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
$(this).css({
//position: "relative",
});
}
});