jQuery 令人不快的 Draggable、Ressized 交互
当我调整第一个 div 的大小时，它会导致下一个 div 在列中“向上”跳跃。
要重新创建：顶部 div 拖动调整大小手柄。
jQuery <代码> $(函数() { $('.portlet').draggable({ grid: [25, 25] }).ressized({ grid: [25, 25] }); }); 布局
<div class="portlet" id="P2">
<div class="portlet-header"><h3>News</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="Div1">
<div class="portlet-header"><h3>Feeds</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
CSS
.portlet { 最小宽度：100px； 最小高度：100px； 宽度：100px； 高度：100px； 背景颜色：#C0C0C0； }
When I resize the first div it causes the next div to jump 'up' the column.
To recreate: top div drag the resize handle.
jQuery
$(function() {
$('.portlet').draggable({ grid: [25, 25] }).resizable({ grid: [25, 25] });
});
Layout
<div class="portlet" id="P2">
<div class="portlet-header"><h3>News</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="Div1">
<div class="portlet-header"><h3>Feeds</h3></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
CSS
.portlet
{
min-width: 100px;
min-height: 100px;
width: 100px;
height: 100px;
background-color: #C0C0C0;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为 #Div1 指定 top:100px 的绝对定位，并且在调整 #P2 大小时它应该保持不变。在最初调整 #Div1 的大小时，它的内联定位会发生变化，并且浏览器会按照您的描述增加 #Div1 。
Give #Div1 an absolute positioning of top:100px and it should stay put when resizing #P2. On initial resize of #Div1 it's inline positioning becomes changed and the browser bumps up #Div1 as you describe.