How to position the jquery gridster after remove a widget?

Question

I can remove widget but I am facing problem with positioning the remain widgets.

When I remove a widget from top the bottom widget will automatically get moved to top its looks good. But when I remove a widget from left the right widget not gets moved to left?

Answer 1

Finally i solved this problem

<div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0<span class="removeWidget">X</span></li>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="removeWidget">X</span></li>
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="removeWidget">X</span></li>
      <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="removeWidget">X</span></li>
      <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4<span class="removeWidget">X</span></li>
      <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5<span class="removeWidget">X</span></li>
      <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6<span class="removeWidget">X</span></li>
      <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7<span class="removeWidget">X</span></li>
      <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8<span class="removeWidget">X</span></li>
      <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="removeWidget">X</span></li>
    </ul>
  </div>

<script type="text/javascript">
      var gridster;

      $(function()
      {
        create_gridster();
          function create_gridster()
          {
            gridster = $(".gridster ul").gridster({

              helper: 'clone',
              resize: {
                enabled: true,
                start: function (e, ui, $widget) {
                    console.log("started the resize event");
                },
                stop: function (e, ui, $widget) {
                    var newHeight = this.resize_coords.data.height;
                    var newWidth = this.resize_coords.data.width;
                }
              },
              draggable:
              {
                  enabled: true,
                  start: function(event, ui){
                    console.log("started the draggable event");
                  },
                  stop: function (e, ui, $widget) {

                        console.log($(this));
                        console.log($(ui)[0].$helper.context);
                         console.log("stoped the draggable event");
                    }

              }
            }).data('gridster');
            }




$(".removeWidget").click(function(e)
            {
                var $div=$(e.target).parent();
                //removed the selected widget
                gridster.remove_widget($div);

                //Get available columns
                var cols=[];
                $.each(gridster.serialize(),function(i,item){
                    if($.inArray(item.col,cols)===-1){
                        cols.push(item.col);
                    }
                });

                gridster.destroy(false);
                //remove element of the removed widget
                $div.remove();

                //Get empty column( no widgets in that column)
                var emptyCol=0;
                $.each(cols,function(i,item){
                    if($.inArray(i+1,cols)===-1)
                        emptyCol=i+1;
                });

                //Verify if any of the widget accupies the empty column
                var isEmptyCol=false;
                $("ul li").each(function(e){
                    var col=$(this).attr("data-col");
                    if(col<emptyCol && !isEmptyCol){
                        isEmptyCol=emptyCol-col===$(this).attr("data-sizex")?false:true;
                    }
                });

                //Fill the empty column from the next columns
                if(emptyCol!==0){
                    var rowCol={};
                    $("ul li").each(function(e){
                        var col=$(this).attr("data-col");
                        var row=$(this).attr("data-row");

                        if(col>emptyCol && isEmptyCol)
                        {
                            $(this).attr("data-col",col-1);
                            $(this).data("col",col-1);
                        }
                    });
                }

                //redraw the gridster
                create_gridster();
          });

      });

    </script>