保存元素位置和大小（JQuery ui 可调整大小和可拖动）

Posted 2023-05-07

【中文标题】保存元素位置和大小（JQuery ui 可调整大小和可拖动）

【英文标题】：Saving element position and size (JQuery ui resizable and draggable)

【发布时间】：2009-03-03 11:48:30

【问题描述】：

我是 jquery 甚至 javascript 的新手。我正在尝试创建一个系统，您可以在其中通过登录并拖动和调整 div 大小来编辑非常简单的静态页面。系统工作到您可以编辑站点的地步，但问题是如何保存 div 的坐标和大小。

系统不使用mysql，因为登录只是站点作者的。我还想尝试不需要 javascript 来查看页面（通过 php 从文件中获取坐标和大小）。

所以，基本上我需要一种方法来检查 div 的宽度、高度、左侧和顶部，并在作者点击保存按钮时将它们存储到文件中。

【参考方案1】：

您可以将变量存储在用户机器上的 cookie 中（jQuery 没有原生 cookie 支持，但 this plugin 提供给您）。

但是，这需要 Javascripw，您提到您不想需要它。但是，如果您希望用户能够在页面上拖动模块，那么如果没有 js 的帮助，您将无法做到这一点。

如果您确实想将这些数据存储在服务器端，那么除了使用数据库之外，我所能建议的只是将它们存储在基于文件的缓存中。

【讨论】：

对不起，如果我没有正确解释。但我的意思是只有在编辑模式下才需要 javascript。无需任何编辑工具即可查看网站不需要 javascript。而且我不能真正使用 cookie，因为关键是作者可以编辑其他人如何查看该网站。

哦，对不起，我看错了你的帖子。我想基于文件的缓存是你唯一的选择。

【参考方案2】：

使用 PHP 序列化将数据存储在序列化数组中，并通过 JSON（JavaScript 对象表示法）中的 AJAX 将它们提供给您的 javascript。

这样你就可以做到：

$s_my_data = unserialize(file_get_contents($s_my_filename));
$s_my_json_data = json_encode($s_my_data);

如果您通过 AJAX 阅读此内容，您将能够像访问 JavaScript 对象一样访问它，例如：

myObject.myProperty

希望这会有所帮助；）