如何為可調整大小的jQuery UI元素啟動調整大小功能（觸發句柄拖動）

Question

當我單擊屏幕時，當前在mousedown上動態創建可調整大小的元素。

jQuery UI自動添加句柄以允許用戶單擊並拖動以隨后調整元素的大小。

我想觸發句柄，只要用戶沒有觸發mouseup他們就已經在調整新創建的元素的大小。

我在文檔中找不到任何顯示在單擊這些句柄時觸發哪些事件的內容。 我嘗試執行mousedown並在元素創建后click句柄，放在屏幕上，並設置為resizable 。 這些都沒有奏效。

有誰知道如何觸發調整大小動作的開始？ 或者，如果有人知道如何記錄jQuery UI事件，我可以使用它來查看單擊句柄時發生的操作，遵循相同的路徑，並在此處發布我的結果。

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

Answer 2

我遇到了同樣的問題，最終找到了答案。 您必須將其他信息傳遞給trigger()函數。 見JS小提琴 。