HTML拖放持久性

Question

I would like give user a drag and drop screen where they can move things around. I can use use HTML5 along with JQuery Draggable to achieve this experience.

Question is, How do I persist the position of elements in server side so that new position can be recreated when ever user revisit the page. I do not want to keep track of each (x,y) co-ordinates and store in database, Instead I would like to dynamically generate a "custom" css file on the fly when user move elements, then store that css file in server. Unfortunately, I only has idea I don't know how to keep track of movements and generate css file.

Any tips or some framework which does this will help.

Answer 1

Just played with this http://jqueryui.com/draggable/ , I observed whenever we move the div it changes its inline style (top, left, right, bottom). I copied its style attribute after a movement and refreshed the page.

After refresh the div comes back to original position, now I pasted the copied style attribute to the div and it took its previous state where I copied the style.

SO, you can keep an array of elements Ids as key and style attribute as value. Upload it to server or you can use localStorage @ client. On the page reload fetch the array and set the inline styles back :)

I had the similar requirement in past project but the drop targets were fixed....like tiles can be dropped onto an array of <li> elements. I handled it by storing only the indices of <li> element in order.

Answer 2

I suggest you look into http://diveintohtml5.info/storage.html to store the values on the client side. Otherwise you will can sore the value as a YAML or JSON on the server, but that will a lot of more how to than is relevant for this thread.