Javascript 使多个iFrame像普通窗口一样进行拖动、调整大小和最小化

我在一个工作仪表板上工作，我在一个网页上打开了多个

iframe

，每个

iframe

都有不同的站点。我已经能够让

div

按住

iframes

来调整大小和拖动，但我一辈子都无法在按下左上方的图像时将其最小化。以下是我目前掌握的情况：

//JavaScript文档
$（函数（）{“严格使用”；
$（“#framewrap”）.resizeable（）.draggable（）；
});
.body\u填充{
填充：16px；
}
#框架包装{
右边填充：10px；
左侧填充：10px；
填充底部：28px；
背景色：#277099；
宽度：512px；
高度：90px；
-webkit盒阴影：2px 2px 16px-2px；
盒影：2PX2PX16PX-2px；
边界半径：12px；
位置：绝对位置；
}
#框架{
宽度：100%；
身高：100%；
背景色：#fff；
}

窗口1
window.jQuery | | document.write（“”）
为了对多个窗口进行扩展，我将一些基于ID的元素切换为基于类的元素。您还多次包含jQuery，我对其进行了简化

我想这会让你走的。它基本上是容器上最小化类的简单切换


//JavaScript文档
$（函数（）{
“严格使用”；
$（“.framewrap”）.resizeable（）.draggable（）；
$（.framewrap.actionIcon”）。在（“单击”，函数（）上{
$（this）.closest（.framewrap”）.toggleClass（“min”）；
});
});
.body\u填充{
填充：16px；
}
.framewrap{
右边填充：10px；
左侧填充：10px；
填充底部：28px；
背景色：#277099；
宽度：512px；
高度：90px；
-webkit盒阴影：2px 2px 16px-2px；
盒影：2PX2PX16PX-2px；
边界半径：12px；
位置：绝对位置；
}
.framewrap跨度{
颜色：#FFFFFF；
字体大小：小；
字体风格：普通；
字号：100；
}
.framewrap.actionIcon{
显示：内联块；
浮动：对；
高度：18px；
宽度：18px；
背景图片：url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png);
背景尺寸：封面；
背景位置：中心；
}
.framewrap.min{
高度：90px！重要；
宽度：256px！重要；
}
.framewrap.min.actionIcon{
背景图片：url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/maximize_window.png);
}
.框架{
宽度：100%；
身高：100%；
背景色：#fff；
}

窗口1
首先，如果需要多个iframe；，应避免使用ID）使用类而不是Hey Jon，这非常有效，我可以让多个帧像一个符咒一样独立工作。现在有没有办法为我当前单击的帧更改为zindex？许多窗户重叠awkwardly@xpt您想要什么版本的jquery？还是第二版？我问，因为它现在有点过时了。@xpt谢谢，只是其中一个库现在是通过http而不是httpsPerfect调用的。谢谢JonSG！