views:

340

answers:

8

I made a drag and drop utility that make it possible for users to drag and drop elements directly on a workplace and create their page, I wound how can I save the user's work as HTML page!

A: 

Uhhm,.. press the save button? Seriously though, I think you might want to put more information on your question, such as what's system that you're using, etc, etc..

Salamander2007
Shouldn't this be a comment?
Pim Jager
Maybe. But I was honest about using the Save button. Porta indicated that he want to save user works "as HTML Page", and the easiest way to do this is using the Save button that's available in every browser.
Salamander2007
Yeah okay. file->save is indeed an option.
Pim Jager
+1  A: 

You mean the position of all elements? How about iterating through them and saving their position? If you use jQuery you could do something like this:

var positions = new Array();
function savePositionOfAllDivs() {
 $('div').each( function(){
  $this = $(this);
  id = $this.attr('id');
  position = $this.position();
  left = position.left;
  top = position.top;
  positions[id] = new Array();
  positions[id]['left'] = left;
  positions[id]['top'] = top;
 }
}

And then send the positions array to some server side script which turns it into CSS which you can then embed into the HTML page that the user can download.

(With more specefic information about what your trying to do this could be way more easy and effecient. Say it is a order drag 'n drop functionality then you only have to save the order of div s)

Pim Jager
Why not just use offset() instead of position()? - I'm pretty sure the dimensions plugin is needed in order for "position" to work.
J-P
Position is part of the jQuery core: http://docs.jquery.com/CSS/position
Pim Jager
Whether using position() or offset() is better depends on how your page is build up.
Pim Jager
A: 

document.getElementsByTagName("BODY")[0].innerHTML

Alex Reitbort
Nice but it won't save their position.
Pim Jager
also, document.body.innerHTML is a bit shorter and does the same
I.devries
A: 

Maybe using XPath. You may find useful this discussion on SO.

EDIT:Or maybe you could do sth with Node.childNodes. for more information check MDC here

perfectDay
A: 

Most jQuery drag & drop libraries have the ability to serialize the elements that are being moved into an array that you can save. If you give me the link to the specific library you're using, I can tell you how to harness that.

However, if you made it yourself, you're going to have to try one of the above suggestions.

Salty
A: 

Are you trying to figure out the best way to transfer the HTML & CSS from the front end to the server or the best way to save the HTML on the server (as in DB or File)?

stuartloxton
A: 

I am using jquery , and I made a drag and drop utility that you can use to place some html elements inside the page , I need to know how to save the users work in HTML file that he can download , or can view his work after saving it

porta
Save it to where? Somewhere on your server? Or somewhere on your client?
slim
A: 

I need the same solution that porta is looking for. My scenario is i'm building a drag and drop cms. Users can drag drop html elements to build their pages. Now how do i save these changes (to db or to a session var) and must be able to create a static page with all the above changes that the user made with php. Can someone shed some light. I'm totally new to jquery and wouldn't consider myself expert in php.