如何为可调整大小的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 
}）; 
} 
  

查看这个JSFiddle

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屋！