如何使用元素的实时宽度同时调整另一个 div 的大小?
How to use live width of element to resize another div at the same time?
我有一项特殊任务,我需要调整一个 div 的大小,同时调整另一个 div 的实时宽度,我想知道我该怎么做,请参阅 Fiddle 例如:http://jsfiddle.net/Lindow/x8tdp0kg/14/,(单击文本 div 使句柄出现)。我尝试使用 width
,但它不适用于我的代码。
Javascript :
$('#handles_manager').resizable({
handles: {
'e': '#egrip',
'w': '#wgrip'
}
});
function showHandles(e) {
var width = $(this).width();
var pos_left = $(this).position().left;
var post_top = $(this).position().top;
$('#handles_manager').css({'width':width, 'transform':'translate3d(' + pos_left + 'px, ' + post_top + 'px, 0px)', 'visibility':'visible'});
var handles_width = $('#handles_manager').width(); // Get live width
$(this).css({'width': handles_width + 'px !important'});
}
var elements = document.getElementsByClassName('element');
for(var i = 0; i < elements.length; i++) {
var element= elements[i];
element.addEventListener('click', showHandles);
}
HTML :
<div id="elements">
<div class='element' style="transform: translate3d(0px, 0px ,0px)">
<div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgtryin sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
</div>
<div class='element' style="transform: translate3d(0px, 100px ,0px)">
<div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgskaf kpsoadk ijfdk jod sadsassads</div>
</div>
</div>
<div id="handles_manager">
<div id="resize_content"></div>
<div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>
我使用这种方法是有原因的,这就是我没有将句柄直接输入 html 代码的原因。
有什么建议吗?
找到解决方案,我只需要使用 $('#...').resize(function(e) {}
即可进行实时更改。
我有一项特殊任务,我需要调整一个 div 的大小,同时调整另一个 div 的实时宽度,我想知道我该怎么做,请参阅 Fiddle 例如:http://jsfiddle.net/Lindow/x8tdp0kg/14/,(单击文本 div 使句柄出现)。我尝试使用 width
,但它不适用于我的代码。
Javascript :
$('#handles_manager').resizable({
handles: {
'e': '#egrip',
'w': '#wgrip'
}
});
function showHandles(e) {
var width = $(this).width();
var pos_left = $(this).position().left;
var post_top = $(this).position().top;
$('#handles_manager').css({'width':width, 'transform':'translate3d(' + pos_left + 'px, ' + post_top + 'px, 0px)', 'visibility':'visible'});
var handles_width = $('#handles_manager').width(); // Get live width
$(this).css({'width': handles_width + 'px !important'});
}
var elements = document.getElementsByClassName('element');
for(var i = 0; i < elements.length; i++) {
var element= elements[i];
element.addEventListener('click', showHandles);
}
HTML :
<div id="elements">
<div class='element' style="transform: translate3d(0px, 0px ,0px)">
<div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgtryin sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
</div>
<div class='element' style="transform: translate3d(0px, 100px ,0px)">
<div class="inner-text">sss ss I'mfdgfdg fdgdfgfdgskaf kpsoadk ijfdk jod sadsassads</div>
</div>
</div>
<div id="handles_manager">
<div id="resize_content"></div>
<div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>
我使用这种方法是有原因的,这就是我没有将句柄直接输入 html 代码的原因。
有什么建议吗?
找到解决方案,我只需要使用 $('#...').resize(function(e) {}
即可进行实时更改。