如何在移除小部件后定位jquery欺诈者

Question

我可以删除小部件，但我在定位剩余的小部件时遇到了问题。

当我从顶部移除一个小部件时，底部的小部件会自动移动到顶部，看起来很好。但当我从左边移除一个小部件时，右边的小部件不会被移到左边吗？

Answer 1

最后我解决了这个问题

<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>