CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Jarno
Jarno

Reputation: 139

JqueryUI resize & draggable does not work together?

I have problems using jqueryui resize and draggable in same element. How should they work together? In this version, i can resize image, but i cannot drag it. Idea is to be able to drag image inside bigger div, but not to resize it bigger than inner div is. That should be the final outcome. Could someone give a hint how to get draggable and resize work in same element?

Here it is in fiddle.

Here is HTML

<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

#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

$(function() {
 $( ".imageHere" ).draggable({ cursor: "move",containment: "#container"      }).resizable({containment: "#container"});
});

Upvotes: 1

Views: 1889

Answers (3)

Arun Prasad E S
Arun Prasad E S

Reputation: 10115

This one solved a similar issue of mine

When images are made resizable, they are wrapped by a div. If you want an image to be resizable and draggable, you must make the wrapper draggable.

$('img')
    .resizable()
    .parent()
        .draggable();

However, this is not ideal because the user should not have to know about resizable's implementation to use draggable (and you must make the image resizable before draggable). Also, with the current implementation, if you were to use the above code and then call .resizable('destroy'), the draggable would be destroyed when the wrapper is removed.

Upvotes: 2

Andrew
Andrew

Reputation: 1880

Is this the code that you are looking for:

$(function() {
    $( ".testi" ).draggable(); 
    $( ".imageHere" ).resizable();
});

fiddle

You need to point your draggable to the containing div of the image.

Upvotes: 1

helllomatt
helllomatt

Reputation: 1339

If you set resizable before draggable it will work.

$(function() {
     $( ".imageHere" ).
     resizable({
         containment: "#container"
     }).
     draggable({
         cursor: "move",
         containment: "#container"
     });
});

Here's a JSFiddle

Upvotes: 2

Related Questions