让用户调整 div 容器的大小，页面刷新后保存

Posted 2023-05-08

【中文标题】让用户调整 div 容器的大小，页面刷新后保存

【英文标题】：Let user resize div containers, save after page refresh

【发布时间】：2015-12-24 20:48:49

【问题描述】：

我的问题可能有点具体，但我找不到任何让它工作的方法：我想要的是拥有 3 个用户可以调整大小的 div 容器（C 是地图，而 B 是聊天和 A 一些其他信息，我希望用户能够决定他想要占用最多空间的内容）。这应该在页面刷新后保存，或者我可以保存内容的位置/大小以重新加载。在这里你明白我的意思，我想要水平调整 C 和垂直 A/B 的可能性

我试过的是：

在 CSS 中调整大小，它有多个问题，首先它在页面刷新后不保存（尽管我可以询问我认为的容器的大小并重新加载它）但更大的问题是如果我调整 A 的大小，B 不会'不会变小，而是会被推出我不想要的屏幕

colResizable：一个用于表格的 jQuery 插件，它适用于水平 C 调整但不适用于垂直调整，此外它似乎与引导程序不兼容，由于某种原因，当我添加此行时它停止工作代码：

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3./js/bootstrap.min.js"></script>      

（我需要下拉菜单的引导程序）

所以我真的不知道我可以尝试什么并且在网上找不到任何其他提示，我正在使用 php 来保存 div A 中的更改，因此页面刷新不应该重置调整大小。

如果有人对我有建议和想法，我将不胜感激 :)

【问题讨论】：

您无法仅使用 CSS 保存数据（此处为用户首选项）。你需要 PHP。

是的，我知道而且我也知道如何使用 php 保存数据并加载它 - 但我从哪里得到它？以及如何使调整大小起作用？我不认为设计方面（具有可左右调整 div 大小的可拖动元素，或者您可以这样做）可以在 php 中完成，或者可以吗？

【参考方案1】：

听起来您实际上有多个问题：

如何根据需要调整大小。为此，我建议使用 css 和内联样式，尤其是 flexbox。 如何让用户在浏览器中选择宽度。可能是带有或不带有 jquery 的 javascript。 如何保存选择的宽度和高度，直到刷新之后。为此，您可以使用 localstorage - 仅在同一台计算机上的同一浏览器中工作，或者使用更复杂的服务器端解决方案。为此，您可以使用任何服务器端语言，例如 php。

【讨论】：

首先，感谢您的回答。1。我想我知道默认情况下如何调整元素的大小，目前布局看起来像图片中的那样，我只是无法让它对用户 2 可编辑。这是我最大的问题，因为我没有任何起点如何做到这一点 - 你是否使用 javascript 制作一个可拖动的 div 并让 div 左右占据剩余空间？或者是否可以直接在 javascript 中编辑 div 大小？我对特别可拖动的东西很陌生，我真的找不到任何关于让用户调整东西大小的有用教程 3.我可以将数据保存在我的数据库中，np

以下是有关可调整大小的 div 的其他一些 *** 问题：***.com/questions/391440/make-div-resizeable 和 ***.com/questions/8960193/…

【参考方案2】：

你应该使用 javascript 来调整大小...看来你已经解决了这个问题。 你可以做的是在调整大小结束时触发一个 javascript 函数（您用于调整大小的库应该具有该功能），该函数创建一个 cookie 或调用一个 ajax 请求，将信息发送到一个 php 文件，将其保存到永久数据库。