$( '.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width",'auto');
} ,
drag: function() {
$(".new-div").css("width",'auto');
} ,
start: function() {
$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){
$(this).closest('div').remove();
});
$('.new-div').on("click", function(){
var uscontent= $(this).text();
if(uscontent.trim()==="Add Your Text"){
$('.mc').text('');
$(this).css("width","100px");
$(this).css("height","6%");
}
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});
}
});
var rotation = 0;
var rotating = false;
var startX = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
$(document).mousemove(function(e){
if (!rotating) return;
rotation = startX - e.clientX;
$('.new-div').rotate(rotation);
});
$(document).on("mouseup", function(){
rotating = false;
});
$('.rotateButton').on("mousedown", function(e) {
e.stopImmediatePropagation();
rotating = true;
startX = e.clientX;
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 55px;
border:2px solid black;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
.rotateButton
{
display:block;
position:absolute;
top:-10px;
left:82px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="mc" data-scale-reference="new-div">
Add Your Text
</span>
<a class="closeButton"></a>
<a class="rotateButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
</div>
</div>