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

Question

Currently dynamically creating a resizable element on mousedown 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 .