How to memorize and store the positions ?

[pepperstreet]

Hello, first of all... a very interesting plugin and effect. Reminds on Metro style, these days ;-) The first question I had in my mind: Is it possible to use this behavior with projects like BootMetro or Metro UI etc. Some of them look really nice, but all lack this drag-n-drop feature.

The second question: How to store the positions for the visiter. In Browser session and cookie? Maybe with reset button. Is there any jQuery plugin, that might handle this functionality...

Thanks for listening.

[dan-klasson]

For the second question, this should work:

$('<div id="main" class="gridster"></div>').appendTo('body');

if($.cookie("grid-data") == null) {
    var json = [
      {
        "id": "foo",
        "col": 1,
        "row": 1,
        "size_y": 3,
        "size_x": 3
      },
      {
        "id": "bar",
        "col": 4,
        "row": 1,
        "size_y": 2,
        "size_x": 2
      },
    ];
} else {
    var json = JSON.parse($.cookie("grid-data"));
}

var grid = $("#main").gridster({
    widget_margins: [8, 8],
    widget_base_dimensions: [140, 140],
    serialize_params: function($w, wgd) { 
        return { 
            id: wgd.el[0].id, 
            col: wgd.col, 
            row: wgd.row,
            size_y: wgd.size_y,
            size_x: wgd.size_x,
        } 
    }
}).data('gridster');

for(i=0; i<json.length; i++) {
    grid.add_widget(
        '<div id="' + json[i]['id'] + '"></div>', 
        json[i]['size_x'], 
        json[i]['size_y'], 
        json[i]['col'], 
        json[i]['row'] 
    );
}

$.cookie("grid-data", JSON.stringify(grid.serialize()));

[MichaelDragos]

Hi, I've tried the above code, but it doesn't work, for some reason the col and row positions are not the ones of the changed positions, but the original ones. The size_x and size_y are returned correctly (if I change the size of the boxes in the code, the old size appears until I clear the browser cache) . I've also tried using serialize_changed, but it returns an empty array... Any ideas on how to make it work? Thanks

[dan-klasson]

What do you mean by "if I change the size of the boxes in the code"? Are you changing the size of the grid dynamically? Show me your code please.

[MichaelDragos]

Hi,

The code is exactly like yours:

var gridster;
$(function ()
 {
    $('<div id="main" class="gridster"></div>').appendTo('section');

    if ($.cookie("grid-data") == null) {
        var json = [{
            "id": "foo",
            "col": 1,
            "row": 1,
            "size_y": 2,
            "size_x": 3
        }, {
            "id": "bar",
            "col": 4,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },

        {
            "id": "tar",
            "col": 6,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },

        {
            "id": "boo",
            "col": 1,
            "row": 3,
            "size_y": 2,
            "size_x": 3
        }, {
            "id": "aar",
            "col": 4,
            "row": 3,
            "size_y": 2,
            "size_x": 2
        },

        {
            "id": "dar",
            "col": 6,
            "row": 3,
            "size_y": 2,
            "size_x": 2
        }

        ];
    }
    else
    {
        var json = JSON.parse($.cookie("grid-data"));
    }

    var grid = $("#main").gridster({
        widget_margins: [8, 8],
        widget_base_dimensions: [100, 100],
        max_size_y: 3,
        serialize_params: function ($w, wgd) {
            return {
                id: wgd.el[0].id,
                col: wgd.col,
                row: wgd.row,
                size_y: wgd.size_y,
                size_x: wgd.size_x
            }
        }
    }).data('gridster');

    for (i = 0; i < json.length; i++) {
        grid.add_widget(
            '<div id="' + json[i]['id'] + '"></div>',
        json[i]['size_x'],
        json[i]['size_y'],
        json[i]['col'],
        json[i]['row']);
    }

    $.cookie("grid-data", JSON.stringify(grid.serialize()));

});

To test if the cookie functionality is working, I've just modified the values on the "tar", "boo", etc... ids, and when refreshing the page the old values appears (because of the cookie). My issue is that I want the positions to be saved after drag & drop and this is not working... Thanks

[pepperstreet]

@dan-klasson First of all, many thanks for your help and code suggestions. Very much appreciated! Unfortunately, i had no chance to give it a try, yet. Looking forward to it.

BTW, i recently read about jQuery Cookie plugins. e.g. https://github.com/carhartl/jquery-cookie Is this helpful? Or do jQuery and JSON the trick...

[MichaelDragos]

b>@pepperstreet</b: the above code is using the cookie plugin!

[dan-klasson]

Yeah of course, sorry. You need to serialize in draggable.stop:

var grid = $("#main").gridster({
    draggable: {
        stop: function(event, ui){ 
            $.cookie("grid-data", JSON.stringify(grid.serialize()));
        }
    },
    // ...

[pepperstreet]

@MichaelDragos ;-) o.k. As you can see, I am neither a javascript, nor a jQuery-guy. Just a user. So, $cookie is already a part of jQuery?! Anyway, just wanted to help ;-)

[dan-klasson]

@pepperstreet:

Cookie is a jQuery plugin. Download it off their website and include it like this:

<script type="text/javascript" src="js/jquery.cookie.js"></script>

[MichaelDragos]

b>@dan-klasson</b Thanks, it's working now :+1:

[pepperstreet]

@dan-klasson Thanks for your headsup. But which one is the plugin you are using here? There seem to be different projects and i just get a suitable link to the "old" jQuery plugin directory.

[dan-klasson]

@pepperstreet:

Download it here by clicking on the "zip" icon:

https://github.com/carhartl/jquery-cookie

[justinjfowler]

Hey @dan-klasson, I'm still a bit new to javascript, so the solution here has been a bit over my head. Where do I place this code?:

var grid = $("#main").gridster({
    draggable: {
        stop: function(event, ui){ 
            $.cookie("grid-data", JSON.stringify(grid.serialize()));
        }
    },
    // ...

Thanks! =)

[dan-klasson]

@justinjfowler

It's probably better you post a question on Stackoverflow about it. Clearly outlining what it is you want to achieve. And preferably providing code examples of what you've tried.

[bowersdesign]

I've got this working but was wondering how to use it with default content... Instead of the default content (json) in the code from @MichaelDragos how would I do this with the html?

<div id="main" class="gridster"

```

</div>
</code>
var gridster;
$(function ()
 {
    $('<div id="main" class="gridster"></div>').appendTo('section');

if ($.cookie("grid-data") == null) { var json = [{ "id": "foo", "col": 1, "row": 1, "size_y": 2, "size_x": 3 }, { "id": "bar", "col": 4, "row": 1, "size_y": 2, "size_x": 2 },

{
    "id": "tar",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "id": "boo",
    "col": 1,
    "row": 3,
    "size_y": 2,
    "size_x": 3
}, {
    "id": "aar",
    "col": 4,
    "row": 3,
    "size_y": 2,
    "size_x": 2
},

{
    "id": "dar",
    "col": 6,
    "row": 3,
    "size_y": 2,
    "size_x": 2
}

];

} else { var json = JSON.parse($.cookie("grid-data")); }

   var grid = $("#main").gridster({
    draggable: {
        stop: function(event, ui){ 
            $.cookie("grid-data", JSON.stringify(grid.serialize()));
        }
    },
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        max_size_y: 3,
        serialize_params: function ($w, wgd) {
            return {
                id: wgd.el[0].id,
                col: wgd.col,
                row: wgd.row,
                size_y: wgd.size_y,
                size_x: wgd.size_x
            }
        }
    }).data('gridster');

for (i = 0; i < json.length; i++) { grid.add_widget( '

', json[i]['size_x'], json[i]['size_y'], json[i]['col'], json[i]['row']); }

});

[dan-klasson]

Assuming like this, from looking at the docs:

```
``` var grid = $(".gridster ul").gridster({ On Sun, Oct 6, 2013 at 5:34 PM, bowersdesign notifications@github.comwrote: > I've got this working but was wondering how to use it with default > content... Instead of the default content (json) in the code from > @MichaelDragos https://github.com/MichaelDragos how would I do this > with the html? > > - > - > - > - > - > - > - > - > - > - > - > > var gridster; > $(function () > { > $(' > ').appendTo('section'); > > if ($.cookie("grid-data") == null) { > var json = [{ > "id": "foo", > "col": 1, > "row": 1, > "size_y": 2, > "size_x": 3 > }, { > "id": "bar", > "col": 4, > "row": 1, > "size_y": 2, > "size_x": 2 > }, > > ``` > { > "id": "tar", > "col": 6, > "row": 1, > "size_y": 2, > "size_x": 2 > }, > > > { > "id": "boo", > "col": 1, > "row": 3, > "size_y": 2, > "size_x": 3 > }, { > "id": "aar", > "col": 4, > "row": 3, > "size_y": 2, > "size_x": 2 > }, > > { > "id": "dar", > "col": 6, > "row": 3, > "size_y": 2, > "size_x": 2 > } > > ]; > ``` > > } > else > { > var json = JSON.parse($.cookie("grid-data")); > } > > var grid = $("#main").gridster({ > draggable: { > stop: function(event, ui){ > $.cookie("grid-data", JSON.stringify(grid.serialize())); > } > }, > widget_margins: [10, 10], > widget_base_dimensions: [140, 140], > > max_size_y: 3, > serialize_params: function ($w, wgd) { > return { > id: wgd.el[0].id, > col: wgd.col, > row: wgd.row, > size_y: wgd.size_y, > size_x: wgd.size_x > } > } > }).data('gridster'); > > for (i = 0; i < json.length; i++) { > grid.add_widget( > '
', > json[i]['size_x'], > json[i]['size_y'], > json[i]['col'], > json[i]['row']); > } > > }); > > — > Reply to this email directly or view it on GitHubhttps://github.com/ducksboard/gridster.js/issues/121#issuecomment-25770154 > .

[bowersdesign]

@MichaelDragos I'm not sure I understand. if ($.cookie("grid-data") == null) { I want the default html in here, not JSON }

[MichaelDragos]

Returning to this, after some time. My issue is that I don't want to use add_widget(), since it's quite slow if the boxes are content heavy. The issue I'm facing is that the code below only saves the last action state; e.g.: I'm drag&dropping one box to another place, then refresh the page(F5) then do the same action for another box and refresh the page again. The result is that while the last box state is saved, the first one returns to it's original place.

Here is the complete code, maybe somebody can help me:

$j(document).ready(function(){

//console.log('Cookie:'+$j.cookie("grid-data"));

var grid = $j(".gridster > ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140],
    avoid_overlapped_widgets:true,
    min_cols: 6,
    extra_rows: 0,
    extra_cols:0,       
    resize: {
        enabled: true
    },

    serialize_params: function ($w, wgd)
      {
              return {
                  id: wgd.el[0].id,
                  col: wgd.col,
                  row: wgd.row,
                  sizex: wgd.size_x,
                  sizey: wgd.size_y 
              }
      },
    draggable:
      {
           stop: function(event, ui)
            {
                        //console.log(JSON.stringify(grid.serialize()));
                        $j.cookie("grid-data", JSON.stringify(grid.serialize()));
            },
    resize: 
      {
        enabled: true,
            stop: function(event, ui)
            {
                //console.log(JSON.stringify(grid.serialize()));
                $j.cookie("grid-data", JSON.stringify(grid.serialize()));
            }
       }
    }).data('gridster');        

    // cookie handling jsonObj
    if ($j.cookie("grid-data") != null)
    {
         var jsonObj = JSON.parse($j.cookie("grid-data"));
         //console.log('jsonObj:'+JSON.stringify(jsonObj));

        // passing the jsonObj atributes to the li elements 
        for (i = 0; i < jsonObj.length; i++)
        {
            var idd = jsonObj[i]['id'];

            $j('li.gs-w').each(function()
            {               
            // pt. fiecare id ii dam inapoi atributele
             if ((this.id) == idd)
                {
                        parseInt($j(this).attr("data-row",jsonObj[i]['row']));
                        parseInt($j(this).attr("data-col",jsonObj[i]['col']));
                        parseInt($j(this).attr("data-sizex",jsonObj[i]['sizex']));
                        parseInt($j(this).attr("data-sizey",jsonObj[i]['sizey']));
                }
            });
        }

    }
    else
    {
        console.log('No cookie');
    }

    var cookie = $j.cookie("grid-data");
});

<div class="gridster">
      <ul>
        <li id="0" data-row="1" data-col="1" data-sizex="2" data-sizey="1"><span>0</span></li>
        <li id="1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"><span>1</span></li>

        <li id="2" data-row="3" data-col="2" data-sizex="2" data-sizey="1"><span>2</span></li>
        <li id="3" data-row="1" data-col="2" data-sizex="2" data-sizey="2">3</span></li>

        <li id="4" data-row="1" data-col="4" data-sizex="1" data-sizey="1"><span>4</span></li>
        <li id="5" data-row="2" data-col="4" data-sizex="2" data-sizey="1"><span>5</span></li>
        <li id="6" data-row="3" data-col="4" data-sizex="1" data-sizey="1"><span>6</span></li>

        <li id="7" data-row="1" data-col="5" data-sizex="1" data-sizey="1"><span>7</span></li>
        <li id="8" data-row="3" data-col="5" data-sizex="1" data-sizey="1"><span>8</span></li>

        <li id="9" data-row="1" data-col="6" data-sizex="1" data-sizey="1"><span>9</span></li>
        <li id="10" data-row="2" data-col="6" data-sizex="1" data-sizey="2">10</span></li>
      </ul>
</div>