jQuery Drag and Drop: What's the best way to store multiple object positions in database?

I have something like this:

<div class="wrapper">
  <div class="drag object1">Example1</div>
  <div class="drag object1">Example1</div>
  <div class="drag object1">Example1</div>
  <div class="drag object1">Example1</div>
  <img src="image.png">
</div>

Basically all classes "drag" are draggable and droppable. I was wondering what's the best way to store everything in the database. Is it a good idea to store everything as a JSON blob when user does any drop within wrapper and save it as JSON in a row in mySQL? Or should I just save whatever individual object was moved in a separate table in mySQL?

If it's JSON blob, how would I use jQuery to make serialize the divs inside #wrapper into jSONS?

Thanks!

Answers


It might be hard to save ONLY moved objects, and I don't think it will be too much (in terms of traffic) to save a 100-item-list like this.

I think a little extra markup is needed (and you should need it) in order to help serialize the stuff:

<div class='drag object1' -data-id='1234'>example1</div>
<div class='drag object1' -data-id='1452'>example1</div>

which I am using the HTML5 markup prefix to mark your entity key. (it plays well in non-html5 browsers as well)

Then, in JQ,

var listOfDrag = [];
$(".wrapper drag").each(function(){
    listOfDrag.push({id: $(this).attr("-data-id")});
});

Then just post the above array to server, using jquery.


Need Your Help

top 1 case in select statement on TSQL

sql tsql case top-n

I am having problem on this query. How can I fix this:

How do I add a LinearLayout inside a RelativeLayout, programmatically?

android android-layout

I've a RelativeLayout which consists of an ImageView and TextView. Now, to this RelativeLayout I want to add a LinearLayout, which should be aligned below the TextView. Right now, the LinearLayout is

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.