jQuery Resizable() + Draggable() Bug Workaround
There is already a bug filed for making the jQuery UI resizable() and draggable() functions work together on the same element. In case you ran into the same problem and ended up here, the solution as it turns out, is very trivial.
// this will make
<div id="box">resizable() and draggable()
$('#box').resizable().parent().draggable();
// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();
Thank you, man! It works fine.
It fixed a serious problem I had.
I bumped into this too, thanks for the solution!
They seem to work together if you remove
class=”ui-widget-content” from the resizable div
i.e. the theme causes the problems
Wow, thank you so much for this. I actually stumbled upon this post, while looking for a plugin to replace these, since I wasn’t able to get it to work. Now, I don’t need to, and I can stick with the jQuery UI branded plugins. Thanks. I’m always amazed at how easy these fixes can be. Definitely had a “Why didn’t I think of that” moment for this one.
Wonderfull !!! thank you :0)
I don’t know if it’s still possible to use your workaround
$(‘#box’).resizable().parent(‘.ui-wrapper’)
In firebug I cant find parent with such class.
Could you possible post full page code that uses draggable + resizable ?
I can’t find any way to make it work for more than one div element.
Great fix! If jQuery hasn’t created the parent class simply add it using .wrap()
$(‘#box’).resizable().wrap(‘^div class=’ui-wrapper’ />’).parent(‘.ui-wrapper’).draggable();
note: You’ll have to replace the caret symbol (^) in the div declaration as I couldn’t post it intact.
hey man!
thanks for the post. It works 🙂
can’t believe this problem still isn’t fixed. thanx for the solution.
This fixes the tric also in version UI version 1.17
$(“#div”)
.resizable()
.draggable()
.removeClass(“ui-draggable”);