gpt4 book ai didi

javascript - 带有网格的 jQuery 可调整大小居中 div 产生意想不到的结果

转载 作者:太空宇宙 更新时间:2023-11-03 23:49:36 24 4
gpt4 key购买 nike

我有一个使用 css 以页面为中心的 div - margin: 0 auto;这是必不可少的

jQuery resizeable 连接到 div 以便它可以水平调整大小。

还添加了可调整大小的“网格”选项,因为在调整大小期间会触发其他函数,并且这些函数在没有激活网格选项的情况下被调用了太多次。

我还向可调整大小的 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/

提前致谢。

最佳答案

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"
});
}
});

我做了一个 fiddle :http://jsfiddle.net/filever10/fYQ58/

尽管我也发现了这一点,所以您使用它的方式可以按照您的意愿行事:http://jsfiddle.net/xhAU4/2/

关于javascript - 带有网格的 jQuery 可调整大小居中 div 产生意想不到的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20519494/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com