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.

Answer 1

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.

Answer 2

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