我最近遇到了一些使用JQuery Draggable和可调整大小的插件的麻烦。寻找解决方案，我在许多不同的地方找到了一些非常分散的代码，最后归结为一个干净的解决方案，似乎对我来说几乎是完美的。
我想我会分享我的发现给任何人，如果他们也来到这个问题。
我有一个div包含和IFrame。这个div必须调整大小并拖动。足够简单 – 将jquery draggable和可调整大小添加到div中，如下所示：
$("#Div").draggable();
$("#Div").resizable();
一切都很好，直到你拖动一个包含iframe的另一个div，或者尝试通过移动当前的iframe来调整你当前的div大小。两个函数在iframe上停止。
解：
$("#Div").draggable({
start: function () {
$(".AllContainerDivs").each(function (index,element) {
var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
$(element).append(d);});
},stop: function () {
$('.iframeCover').remove();
}
});
$("#Div").resizable({
start: function () {
$(".AllContainerDivs").each(function (index,element) {
var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
$(element).append(d);
});
},stop: function () {
$('.iframeCover').remove();
}
});
请享用！
PS：一些额外的代码创建窗口，当被选中，被带到其他可拖动的前面：
在可拖动启动功能中 –
var maxZ = 1;
$(".AllContainerDivs").each(function (index,element) {
if ($(element).css("z-index") > maxZ) {
maxZ = $(element).css("z-index");
}
});
$(this).css("z-index",maxZ + 1);
解决方法
尝试这个：
$('#Div').draggable({ iframeFix: true });
这应该工作。
