Как разместить сетку 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>