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

Question

目前我正在使用mousedown在屏幕上单击时动态创建一个可调整大小的元素。

jQuery UI会自动添加手柄，以允许用户点击并拖动来调整元素大小。

我想触发手柄，这样只要用户没有触发mouseup，他们就已经调整新创建的元素大小了。

我无法在文档中找到任何显示单击这些手柄时触发哪些事件的内容。我尝试在元素创建、放置在屏幕上并设置为resizable后执行mousedown和click。但这两种方法都不起作用。

是否有人知道如何触发调整大小操作的开始？或者，如果有人知道如何记录jQuery UI事件，我可以使用它来查看在单击手柄时发生了什么操作，然后跟随相同的路径，并在此处发布我的结果。

- Matt

---

这是一个关于编程的内容，请将以下文本从英语翻译成中文。只返回翻译后的文本：这里有一个jsfiddle，用于解决这个问题。我还没有想出如何在原始点击的一部分触发拖动（jquery.simulate.js可能会有用）。 - Cymen

Answer 1

来自Michael L的回答中提供了基本的小提琴，但仍然存在一些错误/限制。因此，我在这里添加了我的修改版本作为答案。

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

请查看这个 JSFiddle

这里涉及到IT技术。

- huysentruitw

Answer 2

我曾经遇到相同的问题，最终找到了答案。你需要在trigger()函数中传入额外的信息。请查看JS Fiddle。

- Michael L.