How to initiate resizing function (trigger handle drag) for resizable jQuery UI elements

Question

Currently dynamically creating a resizable element onmousedown when I click the screen.

jQuery UI auto adds handles to allow the user to click and drag to resize the element afterward.

I would like to trigger the handle so that as long as the user hasn't triggered mouseup they'll already be resizing the newly created element.

I can't find anything in the documentation that shows what events get triggered upon clicking those handles. I have tried executing mousedown and click on the handle after the element is created, placed on screen, and set as resizable. Neither of these worked.

Does anyone know how to trigger the start of the resize action? Alternatively if anyone knows how to log jQuery UI events I can use that to view what actions occur when the handles get clicked, follow the same path, and post my results here.

Answer 1

The fiddle in the answer from Michael L covers the essentials but still contains some bugs/limitations. Therefore I'm adding my modified version here as an answer.

HTML

<div id='container'></div>

CSS

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #eee;
}

.block {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
    opacity: 0.2;
}

JavaScript

$("#container").on("mousedown", function(event){
    if (event.target !== this) {
        return;
    }
    var $target = $(event.target),
        $block = $("<div />")
            .addClass("block")
            .css({
                top: event.pageY - $target.offset().top,
                left: event.pageX - $target.offset().left
            })
            .resizable()
            .draggable({ containment: $target });
    $target.append($block);
    simulateHandleEvent($block, "se", event);
})

function simulateHandleEvent($item, handle, event){
    $item.find(".ui-resizable-" + handle)
        .trigger("mouseover")
        .trigger({
            type: "mousedown", 
            which: 1,
            pageX: event.pageX,
            pageY: event.pageY
    });
}

Check out this JSFiddle

Answer 2

I had the same problem and finally figured out the answer. You have to pass in additional information to the trigger() function. See JS Fiddle.