Best way to save drag and drop layout

Question

I've seen this question a few times but they mostly have to do with individual objects and cookies. I am building an application with a toolbox drag and drop functionality (very much like you'd see in Visual Studio - i.e. dragging objects onto a form, giving them a name, etc...) Therefore the droppable area could have many objects including nested droppables.

Any opinions on what is the best way to save to a SQL Server database, and then re-load such a complex layout? Objects would need to load and display exactly as they were saved. It will be done by ajax but beyond that I'm not sure the best way to proceed. Also any examples that might point me in the right direction would be great.

Much obliged.

Which version of SQL Server? This is a new feature of 2008: http://msdn.microsoft.com/en-us/magazine/cc794278.aspx — JeffO, Feb 23 '11 at 16:50

score 2 · Accepted Answer · answered Feb 23 '11 at 16:55

2

You can serialize the data via XML or JSON and save the serialized string into the database. This would keep your database and web service infrastructure simple than having to save each control separately but would require more parsing on the JS side, but since your app sounds JS-heavy, I am assuming that shouldn't be a problem for you.

var state = {
    textbox1:{
        x:100,
        y:200,
        width:20,
        height:10,
        defaultValue:'Hello world!'
    },
    button1:{
        x:150,
        y:200,
        width:20,
        height:10,
        text:'Push me!'
    }
}
var serialized = JSON.stringify(state);
yourService.SaveSate(serialized)   //made this object up to mock your web service

JSON.stringify is only on modern browsers but there are plenty of alternatives around if you are targeting older stuff.

answered Feb 23 '11 at 16:55

Jeff

13,943
11
55
103

.serialize seems like it only works on form elements (from all of the documentation i can find.) Am I wrong about this? In my app, a div is resizeable, so the resized div along with all of the divs it contains, their positions, heights, etc... would also need to be saved. Does .serialize accomplish this? – asleepatmydesk Feb 25 '11 at 03:59
Thanks @Jeff, please see my previous comment if you don't mind. – asleepatmydesk Feb 25 '11 at 04:21
That is correct. `.serialize` or `.serializeArray` wouldn't capture non-form elements like `
` tags and CSS styles. You would need to build those up manually. Dumping all of that into a JSON object and serializing the JSON object sounds to me like it would be the easiest way to do that. Otherwise, you would call `.serialize` and then perform several string manipulations to get these extra fields (like styles) in.
– Jeff Feb 25 '11 at 16:31

score 1 · Answer 2 · edited May 23 '17 at 10:10

If you're trying to represent hierarchy in a relational database, there are two methods I've seen: The Adjacency List Model and The Nested Set Model.

Here's a link to a good description of both using MySQL: http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/

Depending on the method you pick, what you pass to your back-end will vary.

Maybe also see this question: Storing folder hierarchy in relational database

Best way to save drag and drop layout

2 Answers2