可调整大小和可拖动的 div

Posted 2023-05-08

【中文标题】可调整大小和可拖动的 div

【英文标题】：Resizable and draggable div

【发布时间】：2014-01-16 02:33:50

【问题描述】：

我正在制作 windows javascript 仿真。现在，我正在创建程序窗口。他们有这样的代码：

    <div class="program" draggable="true">
            ...more imgs
    <img src="./res/img/closeButton.png" title="Close">
    <iframe src="./programs/fileExplorer"   class="programBorder"></iframe>
</div>

我需要使整个 div 可拖动（在顶部栏上）和调整大小（侧边和底部栏已满，顶部只有一小部分）。不用 javascript（仅限 css）来完成它真的很酷，但是用 javascript/JQuery 来完成它是可以的

【问题讨论】：

Google is your friend.

请给我们看一些你迄今为止尝试过的例子。

@moonwave99 这不是一个实际的答案。这里的问题是是否有可能“在没有 javascript（仅限 css）的情况下完成它”——Anagmate。因此，jQuery 不是一个答案。

完全不用javascript就可以拖动和调整大小？不可能。

@Tim Resizing 肯定是。看我的回答。

【参考方案1】：

改用 jQueryUI，http://jqueryui.com/dialog/ 它具有现成的可拖动和可调整大小的选项，否则您可以通过库并实现相同的逻辑。

【参考方案2】：

可拖动元素

目前无法仅使用 css+html 制作可拖动元素。你能做的就是使用 jQuery 来解决这个问题。或者，您可以在另一个问题中看到 this answer，该问题解释了如何在没有 jQuery 的情况下制作可拖动元素。

可调整大小的元素

这个确实可以只用 CSS 做，而且很简单。只需在元素上使用resize:both。 This table 显示浏览器对仅 CSS 调整大小的支持，因此您在制作网站时可能应该考虑到这一点。您还可以使用 jQuery 作为 IE 的后备。

Here 是一个演示不同类型的大小调整。

【讨论】：

也许更明确地提到浏览器（缺乏）支持？如果您打算将它用于任何严肃的 Web 开发，您将需要一个 polyfill。

很好，但我还有更多问题。 resize:both 只能通过拖动右下角来调整窗口大小，我想在所有边缘上调整大小。

这是唯一一种可用于 CSS 的调整大小。 CSS 并非旨在为您的网站提供更复杂的交互性。如果你真的需要实际的交互性，你将不得不使用 JavaScript。