拖动，删除和调整元素大小

Question

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

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

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

还有一个工作区，所有组件都被丢弃并调整大小。 用户还可以调整工作区中任何位置的组件位置并更改其位置。 用户设置组件后，页面必须以相同的样式保存，即使刷新页面也不应更改。

我的问题是：

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

如果你知道任何教程，请告诉我，虽然我是JavaScript的初学者，基本上是一个Java程序员。

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

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

Answer 2

1. 您可以做的是将控件的位置保存在xml中并将其保存在表中。

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

Answer 3

我为一个应用程序做了同样的事情。 （但我使用PHP，无论如何它对你需要的东西都没关系）

1. 我使用jQuery + jQuery UI拖放/调整大小
2. 我使用带有4个参数的AJAX（x，y，z-index和元素的id）来拖放拖放
3. 我使用XML作为数据库，但任何数据库（或任何持久性方式）都可以解决问题。 正如@Thibault Witzig所说，为您的项目采取最相关的措施。