Trigger start of resize

Trigger start of resize

I have found other discussions on this, but no definitive answer, not
even a workable one for me.
This is what I want to do:
create and size a box with one click. the steps would be on mousedown
to create a box and trigger the start of resizing, continue to resize
on drag, and complete resizing on mouseup. This behavior can be seen
on google calendar when creating a new event (granted that is not
jquery)
The following does not work
        $("#active_area").mousedown(function(){
            $("body").append("<div id='box'></div>");
            $("#box").resizable();
// i saw somewhere that a mouseover was
required by resizable()
            $("#box .ui-resizable-s").mouseover();
            $("#box .ui-resizable-s").mousedown();
        });
Has anyone solved this?
Some have mentioned using selectable, but i need the features of
resizable that selectable does not have.
Thanks
--