[英]How to initiate resizing function (trigger handle drag) for resizable jQuery UI elements
当我单击屏幕时,当前在mousedown
上动态创建可调整大小的元素。
jQuery UI自动添加句柄以允许用户单击并拖动以随后调整元素的大小。
我想触发句柄,只要用户没有触发mouseup
他们就已经在调整新创建的元素的大小。
我在文档中找不到任何显示在单击这些句柄时触发哪些事件的内容。 我尝试执行mousedown
并在元素创建后click
句柄,放在屏幕上,并设置为resizable
。 这些都没有奏效。
有谁知道如何触发调整大小动作的开始? 或者,如果有人知道如何记录jQuery UI事件,我可以使用它来查看单击句柄时发生的操作,遵循相同的路径,并在此处发布我的结果。
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
});
}
我遇到了同样的问题,最终找到了答案。 您必须将其他信息传递给trigger()
函数。 见JS小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.