Drag, drop, and resize items

Question

I have a webpage with three elements <div>:

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

Bottom_barcontains several components, for example. calculator, logo, button group, etc. each component uses <div>and needs to be resized and dragged.

And a workspace where all components are discarded and changed. The user can also resize and reposition components anywhere in the workspace. As soon as the user installs the component, the page should be kept in the same style, and it cannot be changed even after the page is refreshed.

My questions:

• Should I use a database to save component location.
• Which should I use: jQuery / AJAX / anyother?

If you know any tutorials, please let me know, although I'm new to JavaScript, mostly a Java programmer.

Note: on the server I use Servlet.

Answer 1

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

2.jquery UI has a built-in structure that supports div and drop div elements, check this link http://jqueryui.com/demos/droppable/

Answer 2

Whenever a user deletes an item, run 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);

, , , "readystatechange" HTTP-, . , , , , , .

Answer 3

. ( PHP, , )

• jQuery + jQuery UI drag and drop/resize
• AJAX 4 (x, y, z-index id )
• XML , ( ) . @Thibault Witzig, .