使用 jquery 可调整大小的处理程序附加和调整 div 的大小

Question

我正在尝试附加处理程序以调整大小 $('oWrapper_'+num)。但它不会调整大小。我不知道这个问题是否是因为处理程序附加到错误的 div?

我需要的是能够将处理程序附加到 $('oWrapper_'+num) 并能够使用处理程序调整大小。

    num++
    var cloudWrap = $('<div />', { id: 'cloudWrap_'+num}),
        outerWrap = $('<div />').appendTo(cloudWrap)

        outerWrap.append(
            $('<div />', { class: 'tf', id: 'oWrapper_'+num, style: 'white-space:pre-line; font-size: 2vw;' }),
            $('<div />', { class: 'ui-resizable-handle ui-resizable-ne hndl' }),
            $('<div />', { class: 'ui-resizable-handle ui-resizable-se hndl' }),
            $('<div />', { class: 'ui-resizable-handle ui-resizable-sw hndl' }),
            $('<div />', { class: 'ui-resizable-handle ui-resizable-nw hndl' })
        );


        jQuery('#oWrapper_'+num).resizable({
          handles: {
            'ne': '.ui-resizable-ne',
            'se': '.ui-resizable-se',
            'sw': '.ui-resizable-sw',
            'nw': '.ui-resizable-nw'
          },
          aspectRatio: 16 / 9,
        });

编辑：

outerWrap.resizable({
              handles: {
                'ne': '.ui-resizable-ne',
                'se': '.ui-resizable-se',
                'sw': '.ui-resizable-sw',
                'nw': '.ui-resizable-nw'
              },
              aspectRatio: 16 / 9,
          create: function(event, ui) {
                initDiagonal = getContentDiagonal();
                initFontSize = parseInt($("#oWrapper_"+num).css("font-size"));
            },
            resize: function(e, ui) {
                var newDiagonal = getContentDiagonal();
                var ratio = newDiagonal / initDiagonal;

                $("#oWrapper_"+num).css("font-size", (initFontSize/100) + (ratio / (initFontSize/1000))  + "vw");
            }
        });

function getContentDiagonal() {
    var contentWidth = $("#oWrapper_"+CretCount).width();
    var contentHeight = $("#oWrapper_"+CretCount).height();
    return contentWidth * contentWidth + contentHeight * contentHeight;
}

Answer 1

问题是你的 id 选择器 jQuery('#oWrapper_'+num)，执行时新元素还没有添加到 dom，因此选择器不会 return 任何元素resizable 处理程序不会被初始化。

在您的例子中，变量 cloudWrap 指的是新创建的元素，因此您可以使用它来初始化小部件。

num++;
var cloudWrap = $('<div />', { id: 'cloudWrap_'+num}),
    outerWrap = $('<div />').appendTo(cloudWrap)

outerWrap.append(
    $('<div />', { class: 'tf', id: 'oWrapper_'+num, style: 'white-space:pre-line; font-size: 2vw;' }),
    $('<div />', { class: 'ui-resizable-handle ui-resizable-ne hndl' }),
    $('<div />', { class: 'ui-resizable-handle ui-resizable-se hndl' }),
    $('<div />', { class: 'ui-resizable-handle ui-resizable-sw hndl' }),
    $('<div />', { class: 'ui-resizable-handle ui-resizable-nw hndl' })
);


cloudWrap.resizable({
    handles: {
        'ne': '.ui-resizable-ne',
        'se': '.ui-resizable-se',
        'sw': '.ui-resizable-sw',
        'nw': '.ui-resizable-nw'
    },
    aspectRatio: 16 / 9,
});

使用 jquery 可调整大小的处理程序附加和调整 div 的大小

Attach and resizing div using jquery resizable handlers

html

javascript

css

jquery

jquery-ui