get position of elements in wrapper

[Ahmad Badpey]

I'm using gridster.js draggable and resizable grid jquery plugin.

In this plugin all things worked fine. but I have a problem with it.

suppose we have these html structure:

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1" data-catId="5"></li>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-catId="5"></li>

        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1" data-catId="5"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="1" data-catId="5"></li>

        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" data-catId="5"></li>
        <li data-row="3" data-col="2" data-sizex="1" data-sizey="1" data-catId="5"></li>
        <li data-row="3" data-col="3" data-sizex="1" data-sizey="1" data-catId="5"></li>

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

        <li data-row="5" data-col="1" data-sizex="1" data-sizey="1" data-catId="5"></li>
        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1" data-catId="5"></li>
        <li data-row="5" data-col="3" data-sizex="1" data-sizey="1" data-catId="5"></li>

    </ul>
</div>

And this is js codes that I used to initialize it :

var gridster = $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [100, 100],
                max_cols: 3,
                helper: 'clone',
                resize: {
                    enabled: true,
                    max_size: [3, 1]
                },
                serialize_params:
                    function ($w, wgd) {
                        return {pos: $w.index($(wgd.el)), size: wgd.size_x, cat_id: $(wgd.el).data('catId')}
                    }
            }).data('gridster');

As you can see I want to customize output of serialized params so I need the position of each Item in the main wrapper. as you can see I used pos: $w.index($(wgd.el)) to get that but it always return pos:0.

what is solution?

[Daniel Silvestre]

on the serialize_params the $w parameter is the jQuery wrapped HTMLElement and the wdg is the coords object.