jQuery UI可调整大小的重叠问题

时间:2014-06-26 08:22:09

标签: javascript html css jquery-ui jquery-ui-resizable

我在jQuery UI中遇到可调整大小的类的问题(http://jqueryui.com/resizable/) 当调整大小开始时,所有下面的div移动到与重新调整大小的div重叠。 在chrome中使用js控制台,我注意到resizable可以在cssText中添加一些东西。 (位置:绝对;顶部:24px;左:593.90625px;高度:218px;宽度:161px;) 通过删除它,重叠停止,但div不再调整大小。

HTML:

<div id="widget1" class="widget taille-2-2 drag">
    Val : <span id="span1">10</span>
</div>
<div id="widget2" class="widget taille-1-1 drag">
    Val : <span id="span2">20</span>
</div>
<div id="widget3" class="widget taille-2-1 drag">
    Val : <span id="span3">30</span>
</div>

CSS:

.widget {
    padding: 2px;
    border: 2px solid #ccc;
    float: left;
    overflow: hidden;
}

.taille-1-1 {
    width: 47px;
    height: 47px;
}

.taille-2-1 {
    width: 104px; /* taille*2+padding*2+border*2+tile.margin*2 */
    height: 47px;
}

.taille-2-2 {
    width: 104px;
    height: 104px;
}

.drag {
    position: relative;
    margin: 3px;
}

Javascript:

$(".drag").draggable(
{
     helper: "clone"
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

这是fiddle

1 个答案:

答案 0 :(得分:0)

我找到了解决问题的方法,但我很难理解为什么它会起作用:

Javascript:

$(".drag").draggable(
{
     helper: "clone",
     addClasses: false
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});