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

【问题标题】：jQuery UI resizable overlap issuejQuery UI 可调整大小的重叠问题
【发布时间】：2014-06-26 08:22:08
【问题描述】：

我遇到了 jQuery UI 中可调整大小的类的问题 (http://jqueryui.com/resizable/) 当调整大小开始时，下面的所有 div 都会移动到与调整大小的 div 重叠。在 chrome 中使用 js 控制台，我注意到可调整大小在 cssText 中放置了一些东西。（位置：绝对；顶部：24 像素；左侧：593.90625 像素；高度：218 像素；宽度：161 像素；）通过删除它，重叠停止，但 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。

【问题讨论】：

一个小提琴会很好
我已经添加了小提琴。还必须添加一些 javascript 来重新创建错误。
所以您不希望发生任何重叠？我说的对吗？
是的，如果布局改变了，我不介意那么多
找到解决方案：在可拖动中设置 addClasses: false。无法回答自己。

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

【解决方案1】：

我找到了解决问题的方法，但我不明白为什么它会起作用：

Javascript：

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

【讨论】：