-1

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!

porta
  • 31
  • 3

8 Answers8

1

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
  • 31,965
  • 17
  • 72
  • 98
  • Why not just use offset() instead of position()? - I'm pretty sure the dimensions plugin is needed in order for "position" to work. – James Jan 01 '09 at 16:41
  • Whether using position() or offset() is better depends on how your page is build up. – Pim Jager Jan 01 '09 at 19:16
0

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
  • 6,294
  • 8
  • 32
  • 26
  • 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 Jan 01 '09 at 23:55
  • Yeah okay. file->save is indeed an option. – Pim Jager Jan 02 '09 at 10:10
0

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

Alex Reitbort
  • 13,504
  • 1
  • 40
  • 61
0

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

Community
  • 1
  • 1
Adriana
  • 8,464
  • 13
  • 36
  • 37
0

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
  • 6,688
  • 3
  • 33
  • 31
0

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
  • 2,006
  • 3
  • 14
  • 11
0

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
  • 31
  • 3
0

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.