我最近遇到了一些使用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);
解决方法
@H_301_25@ 尝试这个:$('#Div').draggable({ iframeFix: true });
这应该工作。