Dragging, Dropping & resizing elements

Question

I have a web page which has three <div> elements:

Right_bar contains several layouts (nothing to do with this question)

Bottom_bar contains several components e.g. calculator, logo, a group of buttons etc. each component uses a <div> and must be resizable and draggable.

And a Working Area, where all the components are dropped & resized. Also a user can resize & change the location of components anywhere in the Working Area. Once a user sets a component then the page must be saved in same style and it shouldn't be changed even after refreshing the page.

My questions are:

1. Should I use a database to save the location of component.
2. Which one should I use: JQuery / AJAX / anyother?

If you know of any tutorials please let me know although I am beginner in JavaScript, Basically a Java programmer.

Note: on the server side I am using Servlet.

Answer 1

Whenever the user drops an element, launch a simple Ajax request that will pass the new value to the server.

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);

You may want to check if the request succeeded or failed by handling the "readystatechange" event of your http request, but that doesn't seem important in your case. After that you just have to get the value server-side, store it in a session variable, and then on every page load, check if there is a session variable defined for the parameter before setting it to its default value.

Answer 2

1. What you can do is save the location of the control in a xml and save it in a table.

2.jquery UI has as build in framework that supports drag and drop div elements, check this link http://jqueryui.com/demos/droppable/