CODEWITHSUNDEEP
jquerymysqlajaxjsondrag-and-drop
Scott Yu - builds stuff
Scott Yu - builds stuff

Reputation: 11763

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!

Upvotes: 1

Views: 1412

Answers (1)

xandy
xandy

Reputation: 27411

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 the server, using jquery.

Upvotes: 1

Related Questions