I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resolve this issue? Any assistance would be greatly appreciated.
HTML:-
<div class="paper-area" id="paper_area"></div>
<div class="upload-logo drag">Upload Logo</div>
JS:-
$(".drag").draggable({
containment: ".paper-area",
start: function(e, ui) {
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
}).resizable({
containment: ".paper-area",
start: function(e, ui) {
// alert($(".paper-area").width());
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
//position: "relative",
});
}
});
CSS:-
.paper-area {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
width: 400px;
}
.upload-logo {
background: none repeat scroll 0 0 #626262;
color: #7B7B7B;
height: 98px;
margin: 0 auto;
text-shadow: 1px 1px 2px #FFFFFF;
width: 99px;
}