如何为可resize的jQuery UI元素启动resizefunction（触发句柄拖动）

当我单击屏幕时，当前在mousedown上动态创建可resize的元素。

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

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

我在文档中找不到任何显示在单击这些句柄时触发哪些事件的内容。 我已经尝试执行mousedown并在元素创建后click句柄，放在屏幕上，并设置为resizable 。 这些都没有奏效。

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

Answer 1

Michael L的答案中的小提琴涵盖了必需品，但仍然包含一些错误/限制。 因此我在这里添加我的修改版本作为答案。

HTML

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 = $("
") .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小提琴 。