如何为可调整大小的jQuery UI元素启动调整大小的功能(触发句柄拖动) [英] How to initiate resizing function (trigger handle drag) for resizable jQuery UI elements
问题描述
目前在 mousedown上动态创建可调整大小的元素
当我点击屏幕。
jQuery UI自动添加句柄,允许用户点击并拖动以调整元素的大小。
我想触发句柄,只要用户没有触发 mouseup
,它们将已经调整了新创建的元素的大小。 p>
我在文档中找不到任何可以点击这些句柄触发的事件。在元素创建之后,我已经尝试在句柄上执行 mousedown
和单击
,放在屏幕上,并设置为可调整大小的
。这两个都没有。
有谁知道如何触发调整大小动作的开始?或者,如果有人知道如何记录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;
背景颜色:红色;
不透明度:0.2;
}
JavaScript
(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);
})
函数simulateHandleEvent($ item,handle,event){
$ item.find(。ui-resizable-+ $)
.trigger(mouseover)
.trigger({
type:mousedown,
which:1,
pageX:event.pageX,
pageY:event.pageY
});
}
Currently dynamically creating a resizable element onmousedown
when I click the screen.
jQuery UI auto adds handles to allow the user to click and drag to resize the element afterward.
I would like to trigger the handle so that as long as the user hasn't triggered mouseup
they'll already be resizing the newly created element.
I can't find anything in the documentation that shows what events get triggered upon clicking those handles. I have tried executing mousedown
and click
on the handle after the element is created, placed on screen, and set as resizable
. Neither of these worked.
Does anyone know how to trigger the start of the resize action? Alternatively if anyone knows how to log jQuery UI events I can use that to view what actions occur when the handles get clicked, follow the same path, and post my results here.
The fiddle in the answer from Michael L covers the essentials but still contains some bugs/limitations. Therefore I'm adding my modified version here as an answer.
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
});
}
Check out this JSFiddle
这篇关于如何为可调整大小的jQuery UI元素启动调整大小的功能(触发句柄拖动)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!