jQuery令人讨厌的可拖动，可调整大小的交互 [英] jQuery unpleasant Draggable, Resizable interaction
问题描述
当我调整第一个div的大小时，它将导致下一个div跳到该列上.
要重新创建:div拖动调整大小手柄.
jQuery
$(function() {
$('.portlet').draggable({ grid: [25, 25] }).resizable({ grid: [25, 25] });
});
布局
CSS
.portlet
{
min-width: 100px;
min-height: 100px;
width: 100px;
height: 100px;
background-color: #C0C0C0;
}
赋予#Div1 top:100px的绝对位置，并且在调整#P2大小时应保持原样.最初调整#Div1的大小后，它的内联定位就会更改，并且浏览器会像您所描述的那样提升#Div1.
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;
}
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.
这篇关于jQuery令人讨厌的可拖动，可调整大小的交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
