[英]Attach and resizing div using jquery resizable handlers
我正在嘗試附加處理程序以調整$('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;
}
問題是您的id選擇器jQuery('#oWrapper_'+num)
,當執行時,新元素尚未添加到dom中,因此選擇器不會返回任何元素,因此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,
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.