可移动和可调整大小的 div，子 div 用它调整大小吗？答案

【问题标题】：Movable and re-sizable div, child divs re-sizing with it?可移动和可调整大小的 div，子 div 用它调整大小吗？
【发布时间】：2011-03-26 22:37:45
【问题描述】：

好的，所以我从字面上完全用 CSS3 制作了一个“我的电脑”窗口。我要完成它，我想做的就是移动它并使窗口重新调整大小。

有些子类只想调整宽度，有些想调整宽度和高度。这似乎是一项艰巨的任务，而我实际上更关心 div 的移动。我已经尝试了几次，但我就是无法让它工作！

有人可以帮助我吗？也许它工作的JFiddle？我很感激你们！

编辑：这是网站，抱歉！：

查看源码，都在里面！

【问题讨论】：

【解决方案1】：

您是否查看过http://jqueryui.com/demos/resizable/ 和http://jqueryui.com/demos/draggable/？我想你可以在这两个和一些自定义代码之间获得你想要的功能。

我刚刚在 jfiddle 上查看了您的代码并将其放入：

$(function() {
    $( ".window" ).draggable().resizable();
});

这很好地使它可以拖动。它也在一定程度上调整了大小。为了更好地调整大小，最好为窗口的子元素指定相对大小（如 100%）而不是像素大小。

我希望这会有所帮助。如果有，请标记为答案。

【讨论】：

【解决方案2】：

您可以考虑使用Interface Elements with JQuery

这里是demos的列表。

你可能特别想看看这个one

Interface 插件中的其他内容也可以像 one 一样为您提供帮助（何时实现滚动）

但是可以试试 JQuery 的接口插件。在我看来它非常有用。

【讨论】：

【解决方案3】：

我和罗伯特在一起。我不确定 CSS 是否有能力使事物变得动态。在这种情况下，解决方案是 Javascript 或建议的（更简单的）jquery。

我可能弄错了，但我认为为了让 javascript（也可能是 jquery）准确指出您希望能够做什么，您需要使用 'id' 属性。

<div class="window" id="window_main">

那么当你使用jquery函数时，你可以将拖拽质量应用到“window_main”。

希望对您有所帮助。

祝你好运！

【讨论】：

【解决方案4】：

在http://jsfiddle.net/Sc2Qm/1/查看工作示例

当前调整大小只会调整.window 的大小，这取决于您的 html 和 CSS 布局方式。

【讨论】：