5

当前在我单击屏幕时动态创建可调整大小的元素。mousedown

jQuery UI 自动添加句柄以允许用户在之后单击并拖动以调整元素大小。

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

我在文档中找不到任何显示单击这些句柄时触发了哪些事件的内容。在创建元素mousedown、click放置在屏幕上并设置为resizable. 这些都不起作用。

有谁知道如何触发调整大小动作的开始？或者，如果有人知道如何记录 jQuery UI 事件，我可以使用它来查看单击句柄时发生的操作，遵循相同的路径，并在此处发布我的结果。

4

2 回答 2

6

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

于 2013-11-04T12:48:36.667 回答
3

我遇到了同样的问题，终于找到了答案。您必须将附加信息传递给该trigger()函数。请参阅JS 小提琴。

于 2013-04-08T04:00:46.977 回答