Bir widget'ı kaldırdıktan sonra jquery kılavuzunu nasıl konumlandırma?

Question

Widget'ı kaldırabilirim ancak kalan widget'ları konumlandırmada sorun yaşıyorum.

Bir widget'ı yukarıdan kaldırdığımda, alt pencere öğesi otomatik olarak en üst sıraya taşınır. Ancak bir widget'ı soldan kaldırdığımda, doğru widget sola hareket ettirilmez mi?

Answer 1

Son olarak ben bu sorunu çözdü

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