CODEWITHSUNDEEP
jquery-ui
Steve
Steve

Reputation: 4908

Unable to chain draggable and resizable

I have an image at http://jsfiddle.net/3GWL2/2/ that I want to make draggable and resizable:

I'm experimenting with three lines:

1. //$('#clown').draggable();
2. //$('#clown').draggable().resizable();
3. //$('#clown').resizable().draggable();

If I only uncomment line 1 the image is draggable fine. If I only uncomment line 2 the image is resizable but it's not draggable. If I only uncomment line 3, the image is draggable, but but only within the original size, and the image is resizable.

Apparently resizable and draggable are far from independent of each other. Could someone explain what's going on here?

Thanks

Upvotes: 0

Views: 168

Answers (2)

Joe
Joe

Reputation: 28366

jQuery UI's .resizable() makes your element resizable by adding a ui-wrapper div around your element that is initially the same size as your element, and setting your element to fill both height and width. Making your element draggable only allows it to be dragged within the ui-wrapper div.

If you want to be able to both drag and resize, apply .resizable() first, then make the wrapper draggable by calling .parent().draggable() on your element.

$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable();  //makes the new parent draggable

Upvotes: 2

rusln
rusln

Reputation: 1284

1: The resizable widget creates a wrapper div with css property overflow:hidden

2: The draggable is being moved by changing: top and left property.

3: scenario's:

3.1 When you first initialize the resizable and then draggable, the draggable will get position:relative, relative to the wrapper created by the resizable.(and will get trapped inside the wrapper created by the resizable).

3.2 When you first initialize the draggable and then the resizable, the draggable will get position:static. If you use dev tools in chrome and move the draggable you will see that the top and left properties are changed however the draggable with property position:static will stay inside the wrapper created by the resizable(and visually stay on the same place).

4: this is actually a cool question, because i never really delved into inner workings of the widgets and how they interact with css. Thank you, now i can't sleep until i figured it out :)

Upvotes: 1

Related Questions