Javascript 如何为可调整大小的jQuery UI元素启动调整大小功能（触发器句柄拖动）

当前，当我单击屏幕时，在

mousedown

上动态创建一个元素

jQueryUI自动添加句柄，允许用户单击并拖动以调整元素的大小

我想触发句柄，这样只要用户没有触发

mouseup

，他们就可以调整新创建的元素的大小

我在文档中找不到任何显示单击这些句柄时触发哪些事件的内容。我已尝试在创建元素后执行

mousedown

并在句柄上单击

，将其放置在屏幕上，并设置为
可调整大小
。这两个都不起作用

有人知道如何触发调整大小操作的开始吗？或者，如果有人知道如何记录jQuery UI事件，我可以使用它来查看单击句柄时发生的操作，遵循相同的路径，并将结果发布到此处。
我遇到了同样的问题，最终找到了答案。您必须将附加信息传递给
trigger（）
函数。请参阅。
的答案中的提琴涵盖了要点，但仍包含一些错误/限制。因此，我在这里添加我的修改版本作为答案

HTML

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

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
    });
}

$（“#容器”）.on（“鼠标向下”，函数（事件）{
如果（event.target！==此）{
返回；
}
var$target=$（event.target），
$block=$（“”）
.addClass（“块”）
.css({
top:event.pageY-$target.offset（）.top，
左：event.pageX-$target.offset（）。左
})
.可调整大小（）
.draggable（{containment:$target}）；
$target.append（$block）；
simulateHandleEvent（$block，“se”，事件）；
})
函数simulateHandleEvent（$item、handle、event）{
$item.find（“.ui可调整大小-”+句柄）
.触发器（“鼠标悬停”）
.扳机({
键入：“mousedown”，
其中:1,，
pageX:event.pageX，
pageY:event.pageY
});
}

有关此问题，请查看
。我还没有弄清楚如何触发拖动作为原始单击的一部分（可能有用）。
$("#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
    });
}