拖拽、放置和调整元素大小

Question

我有一个网页，其中包含三个 <div> 元素： Right_bar 包含多个布局（与此问题无关）。 Bottom_bar 包含多个组件，例如计算器、标志、一组按钮等。每个组件都使用一个 <div>，必须可调整大小和可拖动。

还有一个工作区，所有组件都被放置并调整大小。用户还可以调整组件的位置。一旦用户设置了组件，则页面必须以相同的样式保存，并且即使刷新页面也不应更改它。

我的问题是：

1.我应该使用数据库来保存组件的位置吗？

2.我应该使用哪个：JQuery / AJAX / 其他？

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

注意：在服务器端，我正在使用 Servlet。

- Bibhaw

Answer 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”事件来检查请求是否成功或失败，但在你的情况下这似乎不重要。 之后，你只需在服务器端获取该值，将其存储在会话变量中，然后在每个页面加载时检查是否为该参数定义了会话变量，如果没有，则将其设置为默认值。

- Thibault Witzig

Answer 2

1. 你可以将控件的位置保存在xml中，并将其保存在表中。

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

- CliffC

---

谢谢Cliffc，我刚刚浏览了这个JQuery链接，它只是简单地介绍了拖放，但每当你刷新页面时，元素就会回到它的原始位置。 - Bibhaw

Answer 3

我曾经为一个应用程序做了同样的事情。（但我使用的是PHP，无论你需要什么，这都不重要）

1. 我使用了jQuery + jQuery UI拖放/调整大小
2. 我使用了带有4个参数（x、y、z-index和元素的id）的AJAX来进行拖动停止的拖放
3. 我使用XML作为数据库，但任何数据库（或任何持久化方式）都可以胜任。正如@Thibault Witzig所说，选择最相关的方式来完成你的项目。

- Shikiryu

---

为什么要将这个保存到数据库中？这不是重要的信息，只是显示设置。如果需要长时间持久性，则会话+Cookie看起来很好。 - Thibault Witzig

因为在我的情况下，我需要更改在我去的任何地方都能保存。会话太短，Cookie 只能在一个计算机上保存；如果您转到另一个计算机，则显示将是默认值。持久性取决于项目及其目标。 - Shikiryu

我会使用数据库来处理这个问题 - 它可以扩展到多个用户，并且可能比XML解析更快。 - Bojangles

@JamWaffles：完全同意，这就是为什么我告诉OP关于数据库的事情（没有具体提到一个，因为我不用JAVA）。对于我的项目，只有一个用户，服务器只有PHP而没有数据库，XML是我的选择，并且运行良好。 - Shikiryu