我有一个以页面为中心的div使用css - margin:0 auto;这是必不可少的
jQuery resizeable连接到div,以便可以水平调整大小。
还可以添加resizeable的'grid'选项,因为在调整大小期间会触发其他函数,并且这些函数被调用太多次而没有激活网格选项。
我还在可调整大小的div中添加了一个jquery位置,以便在调整大小时保持居中,否则当你拖动左边缘时它会失去它的中心位置。
问题是鼠标向左或向右移动越远,向左或向右拖动div越宽。 div的左/右边缘应始终捕捉到鼠标位置。
此外,ui.size.width报告的值远远高于div的实际宽度。
我尝试了很多修复,但似乎没有任何效果。
这是下面带有jsfiddle链接的代码:
HTML:
<div id="container">
<div class="resize">
Lorem
<br/>ipsum
<br/>dolor
<br/>sit
<br/>amet
<br/>Consectetuer
<br/>Lorem
<br/>magna
<br/>mi
<br/>wisi
</div>
</div>
<div id="width-output"></div>
<div id="ui-width-output"></div>
CSS:
#container {
width:100%;
background-color:#999999;
}
.resize {
width:240px;
margin:0 auto;
background-color:#ccc;
text-align:center;
}
#ui-width-output, #width-output {
text-align:center;
}
jQuery:
$(document).ready(function () {
$(".resize").resizable({
grid: [80, 80],
handles: 'e, w',
resize: function (event, ui) {
ui.size.width += ui.size.width - ui.originalSize.width;
var container = $('#container');
var position = $(this).position();
var container_position = container.position();
var top_position = position.top - container_position.top;
var offset = 'center top+' + top_position;
$(this).position({
of: $(container),
my: offset,
at: "center top",
collision: "fit none"
});
$('#width-output').html('actual width: ' + $(this).width() );
$('#ui-width-output').html('ui.size.width: ' + ui.size.width);
}
});
});
我创建了一个测试用例,以便所有这些更有意义!
http://jsfiddle.net/bennyticklez/S5tN8/51/
提前致谢。
答案 0 :(得分:3)
ui.size.width += ui.size.width - ui.originalSize.width;
给你一半你需要的东西。如果您将更改加倍以适应每一方可能会有所帮助,更像是:
$(".resize").resizable({
grid: [80, 80],
handles: 'e, w',
resize: function(event, ui) {
var newWidth = ui.originalSize.width+((ui.size.width - ui.originalSize.width)*2);
$(this).width(newWidth).position({
of: $("#container"),
my: "center center",
at: "center center"
});
}
});
我做了一个小提琴:http://jsfiddle.net/filever10/fYQ58/
虽然我也找到了这个,所以你曾经用它做你想做的事情:http://jsfiddle.net/xhAU4/2/
答案 1 :(得分:0)
有点破解,但写了一个小函数来做一个非常简单的计算来保持位置居中。 为简单起见,可旋转元件位于父元件中。
HTML:
<div id="container">
<div id="resize-me"></div>
</div>
JS:
$( '#resize-me' ).resizable
( {
handles: { 'se': '#resize-handle' },
aspectRatio: true,
resize: function(){ positionObject( $( this ) ); }
} );
function positionObject( resizeElement )
{
resizeElement.css( 'left', ( resizeElement.css( 'width' ).replace( 'px', '' ) / -2 ) );
resizeElement.css( 'top', ( resizeElement.css( 'height' ).replace( 'px', '' ) / -2 ) );
// console.log(resizeElement.css( 'left' ) );
// console.log(resizeElement.css( 'top' ) );
}