Question

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

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

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

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

我的问题是：

我应该使用数据库来保存组件的位置。
我应该使用哪一个：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

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

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

Answer 3

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

我使用了jQuery + jQuery UI drag＆amp; amp;放弃/调整大小
我使用带有4个参数的AJAX（x，y，z-index和元素的id）进行拖动和放大。放在drag stop
我使用XML作为数据库，但任何数据库（或任何持久性方式）都可以解决问题。正如@Thibault Witzig所说，为你的项目采取最相关的措施。

拖动，拖放和调整元素大小

3 个答案: