Use jQuery draggable and resizable to draw elements

Question

I am trying to figure out how to draw a div using the draggable and resizable jQuery libraries. I found this Which is pretty nice but I really want this functionality to work with the mentioned libraries. To be more specific I want to be able to create a draggable element and drag(resize) it all in one shot. Is this possible?

EDIT: Perhaps I need to do something when the 'create' event happens in draggable or resizable? Do I need to somehow put my mouse on the resizable corner thingy? resizable doesn't seem to turn on until you actually lift your mouse and then press and drag on the resize corner. Here's the code I have now:

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });

Answer 1

Ok I finally figured it out. I used selectable() as per @lunchmeat317's suggestion. I was able to capture the mouse positions during selectable's events: 'start' and 'stop' create a div with the right width and height and position. Here's the jsfiddle