拖放和调整元素大小答案

【问题标题】：Dragging, Dropping & resizing elements拖放和调整元素大小
【发布时间】：2011-01-07 03:26:11
【问题描述】：

我有一个包含三个<div> 元素的网页：

Right_bar 包含几个布局（与本题无关）

Bottom_bar 包含多个组件，例如计算器、徽标、一组按钮等。每个组件都使用<div>，并且必须可调整大小和拖动。

还有一个工作区，所有组件都被删除和调整大小。用户还可以在工作区的任何地方调整大小和更改组件的位置。 一旦用户设置了组件，那么页面必须以相同的样式保存，并且即使在刷新页面后也不应该更改。

我的问题是：

我应该使用数据库来保存组件的位置吗？
我应该使用哪一个：JQuery / AJAX / anyother？

如果您知道任何教程，请告诉我，尽管我是 JavaScript 初学者，基本上是一名 Java 程序员。

注意：在服务器端我使用的是 Servlet。

【问题讨论】：

标签： java javascript jquery ajax

【解决方案1】：

每当用户删除一个元素时，启动一个简单的 Ajax 请求，将新值传递给服务器。

try {
   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE
}
catch(e)
{
   var xmlhttp = new XMLHttpRequest(); // Other browsers
}
xmlhttp.open('GET', 'yourServerScript.url?param=value', true);
xmlhttp.send(null);

您可能希望通过处理 http 请求的“readystatechange”事件来检查请求是成功还是失败，但这在您的情况下似乎并不重要。之后，您只需在服务器端获取值，将其存储在会话变量中，然后在每次页面加载时，检查是否为参数定义了会话变量，然后再将其设置为默认值。

【讨论】：

【解决方案2】：

您可以将控件的位置保存在 xml 中并保存在表格中。

2.jquery UI 具有支持拖放 div 元素的内置框架，请查看此链接http://jqueryui.com/demos/droppable/

【讨论】：

感谢 Cliffc，我刚刚浏览了这个 JQuery 链接，它只是简单地讲述了拖放操作，但是每当您刷新页面元素时，它就会返回到它的原始位置。

【解决方案3】：

我为应用程序做了同样的事情。（不过我用的是PHP，反正你需要什么都无所谓）

我使用了 jQuery + jQuery UI 拖放/调整大小
我使用 AJAX 和 4 个参数（元素的 x、y、z-index 和 id）在 drag stop 上拖放
为此，我使用 XML 作为数据库，但任何数据库（或任何持久性方式）都可以解决问题。正如@Thibault Witzig 所说，为您的项目选择最相关的。

【讨论】：

为什么要将它保存到数据库中？这不是重要信息，只是显示设置。如果需要长期持久性，Session + Cookie 看起来不错。
因为就我而言，我需要随时随地保存更改。会话太短，cookie 仅保存在一台计算机上；如果你继续另一个，显示将是默认的。持久性取决于项目及其目标。
我会为此使用数据库 - 它可以扩展到多个用户，并且可能比 XML 解析更快。
@JamWaffles ：完全同意，这就是为什么我告诉 OP 关于数据库的原因（没有命名数据库，因为我不使用 JAVA）。对于我的项目，只有一个用户，服务器只有 PHP，没有 DB，XML 是我的选择并且运行良好。