I am experiencing issues with using both jqueryui resize and draggable in the same element. How can I make them work together seamlessly? Currently, I am able to resize the image but unable to drag it as intended. The goal is to allow dragging of the image within a larger div without resizing it beyond the dimensions of the inner div. Can anyone provide guidance on how to successfully implement both draggable and resizable functionalities in the same element?
You can view the code in action on JSFiddle.
Here is the HTML structure:
<div id="container">
<div id="area">
<div class="testi"><img class="imageHere" width="200" src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" /></div>
</div>
CSS styling:
#area{
position:absolute;
top:67px;
left:75px;
border:solid 2px;
height:215px;
width:600px;
background-color:#FFF;
}
.imageHere{
}
#container{
position:relative;
float:left;
margin-left:50px;
border:solid 2px;
height:350px;
width:750px;
}
Javascript code snippet:
$(function() {
$( ".imageHere" ).draggable({ cursor: "move",containment: "#container" }).resizable({containment: "#container"});
});