拖動調整大小的引導列jQuery UI

Question

我試圖讓引導行中的列通過拖拽方式增量調整大小到各自的列大小。他們必須總共添加12列。

See an example of what I'm trying to achieve

的什麼，我需要最接近的例子是在這裏：http://jsfiddle.net/onigetoc/ag4mgpbs/然而他們周圍的列取決於其旁邊的列不會進行調整或大或小。

我已經看過使用[gridstack.js來實現這一點，但我無法正確使用基本的jQuery/jQuery UI添加或減去列的邏輯。

我寫的代碼肯定是走錯了方向，我無法弄清楚爲什麼當我期望它們時列不會加起來，這可能與事件有關我在用着。

var oldColNum = 0; 
    var nextColFraction = 0; 

    $('.column').resizable({ 
     handles: 'e', 
     containment: 'parent', 
     start: function (e, ui) { 
      var nextCol = $(this).nextAll('.column').get(0); 
      nextColFraction = $(nextCol).data('fraction'); 
      $(this).closest('.row').find('.column').css("width", ''); 
     }, 
     resize: function (e, ui) { 

      // console.clear(); 

      /** 
      * The Column currently being resized 
      */ 
      var thisCol = ui.element; 
      oldColNum = thisCol.data('fraction'); 

      /** 
      * The parenting row 
      */ 
      var parentRow = thisCol.closest('.row'); 

      /** 
      * The Other Columns 
      */ 
      var nextCol = thisCol.nextAll('.column').get(0); 
      var otherCols = parentRow.find('.column').not(thisCol); 
      var otherColFractions = []; 
      otherCols.each(function() { 
       otherColFractions.push($(this).data('fraction')); 
      }); 
      var totalOtherFractions = otherColFractions.reduce(function(a, b) { return a + b }, 0); 

      /** 
      * Work out the percentage width it currently is 
      */ 
      var cellPercentWidth = (100 * thisCol.outerWidth()/parentRow.outerWidth()); 

      /** 
      * Change the class to the one that best suits the current size 
      */ 
      var colNum = getClosest(gridSystem, cellPercentWidth); 

      console.log(colNum, ui.originalElement.data('fraction')); 

      if (colNum < ui.originalElement.data('fraction')) { 
       nextColFraction++; 
       $(nextCol).removeClass(bsClass) 
        .addClass('col-md-' + nextColFraction) 
        .attr('data-fraction', nextColFraction); 
      } 

      if (colNum > ui.originalElement.data('fraction')) { 
       nextColFraction--; 
       $(nextCol).removeClass(bsClass) 
        .addClass('col-md-' + nextColFraction) 
        .attr('data-fraction', nextColFraction); 
      } 

      thisCol.removeClass(bsClass) 
        .addClass('col-md-' + colNum) 
        .attr('data-fraction', colNum); 

      thisCol.css("width", ''); 
     } 
    }); 
}); 

// Bootstrap grid system array 
var gridSystem = [ 
    {grid: 8.33333333, col: 1}, 
    {grid: 16.66666667, col: 2}, 
    {grid: 25, col: 3}, 
    {grid: 33.33333333, col: 4}, 
    {grid: 41.66666667, col: 5}, 
    {grid: 50, col: 6}, 
    {grid: 58.33333333, col: 7}, 
    {grid: 66.66666667, col: 8}, 
    {grid: 75, col: 9}, 
    {grid: 83.33333333, col: 10}, 
    {grid: 91.66666667, col: 11}, 
    {grid: 100, col: 12} 
]; 

// find the closest number from Bootstrap grid 
function getClosest(arr, value) { 
    var closest, mindiff = null; 

    for (var i = 0; i < arr.length; ++i) { 
     var diff = Math.abs(arr[i].grid - value); 

     if (mindiff === null || diff < mindiff) { 
      // first value or trend decreasing 
      closest = i; 
      mindiff = diff; 
     } else { 
      return arr[closest]['col']; // col number 
     } 
    } 
    return null; 
} 

任何幫助將不勝感激。

Answer 1

你會發現下一列後有網格類，並從中刪除一個。

$(function() { 

    var bsClass = "col-sm-1 col-sm-2 col-sm-3 col-sm-4 col-sm-5 col-sm-6 col-sm-7 col-sm-8 col-sm-9 col-sm-10 col-sm-11 col-sm-12"; 

    $(document).ready(function() { 
    $('.mb-grid-item').resizable({ 
     handles: "e", 
     resize: function(e, ui) { 
      console.log('resizable'); 
      var thiscol = $(this); 

      var currentNumberBefore = parseInt(thiscol.attr('class').match(/col-sm-(\d+)/)[1]); 

      var container = thiscol.parent(); 

      var cellPercentWidth = 100 * ui.originalElement.outerWidth()/container.innerWidth(); 

      // ui.originalElement.css('width', cellPercentWidth + '%'); 

      var newColNum = getClosest(gridsystem, cellPercentWidth); 
      var thiscol = $(this); 


      thiscol.css("width", ''); 
      //thiscol.removeAttr("style"); 
      thiscol.find(".showClass").text('col-sm-' + newColNum); 
      //alert(cellPercentWidth); 

      var currentTopPosition = thiscol.position().top 

      var nextColumn = thiscol.next('.mb-grid-item'); 

      var nextTopPosition = nextColumn.position().top; 

      if(currentNumberBefore !== newColNum && nextColumn && nextTopPosition === currentTopPosition) { 
      try { 
       var nextNumber = nextColumn.attr('class').match(/col-sm-(\d+)/)[1]; 
       if(nextNumber) { 
       nextNumber = parseInt(nextNumber); 
       if((nextNumber+1) > 0) { 
        nextColumn.removeClass(bsClass); 
        var nextColumnNumber 
        if(currentNumberBefore > newColNum) { 
        nextColumnNumber = nextNumber+1; 
        } else { 
        if(nextNumber-1 > 0) { 
         nextColumnNumber = nextNumber-1; 
        } else { 
         nextColumnNumber = nextNumber; 
        } 

        } 
        var nextClass = 'col-sm-' + nextColumnNumber.toString(); 
        nextColumn.find(".showClass").text(nextClass); 
        nextColumn.addClass(nextClass); 
       } 
       } 
      } catch(err) { 
       console.log('err', err); 
      } 
      } 

      thiscol.removeClass(bsClass).addClass('col-sm-' + newColNum); 
     } 
     } 
    ); 
    }); //ready end 
}); 

/***********************/ 

// Bootstrap grid system array 
var gridsystem = [{ 
    grid: 8.33333333, 
    col: 1 
}, { 
    grid: 16.66666667, 
    col: 2 
}, { 
    grid: 25, 
    col: 3 
}, { 
    grid: 33.33333333, 
    col: 4 
}, { 
    grid: 41.66666667, 
    col: 5 
}, { 
    grid: 50, 
    col: 6 
}, { 
    grid: 58.33333333, 
    col: 7 
}, { 
    grid: 66.66666667, 
    col: 8 
}, { 
    grid: 75, 
    col: 9 
}, { 
    grid: 83.33333333, 
    col: 10 
}, { 
    grid: 100, 
    col: 11 
}, { 
    grid: 91.66666667, 
    col: 12 
}, { 
    grid: 10000, 
    col: 10000 
}]; 

// find the closest number from Bootstrap grid 
function getClosest(arr, value) { 
    var closest, mindiff = null; 

    for (var i = 0; i < arr.length; ++i) { 
    var diff = Math.abs(arr[i].grid - value); 

    if (mindiff === null || diff < mindiff) { 
     // first value or trend decreasing 
     closest = i; 
     mindiff = diff; 
    } else { 
     // trend will increase from this point onwards 
     //return arr[closest]; //object 
     return arr[closest]['col']; // col number 
     //return arr[closest]['grid']; // col percentage 

    } 
    } 
    return null; 
} 
``` 

Answer 2

注：這更是一個比澄清一個答案，但太多的代碼放在一個註釋。

getClosest函數不包括元素超過11 cols的情況。我改變了以下部分：

function getClosest(arr, value) { 
    var closest, mindiff = null; 

    for (var i = 0; i < arr.length; ++i) { 
    var diff = Math.abs(arr[i].grid - value); 

    if (mindiff === null || diff < mindiff) { 
     // first value or trend decreasing 
     closest = i; 
     mindiff = diff; 
    } else { 
     // trend will increase from this point onwards 
     //return arr[closest]; //object 
     return arr[closest]['col']; // col number 
     //return arr[closest]['grid']; // col percentage 

    } 
    } 
    return null; 
} 

到：

function getClosest(arr, value) { 
    let closest, mindiff = null; 

    for (let i = 0; i < arr.length; ++i) { 
    let diff = Math.abs(arr[i].grid - value); 

    if (i === arr.length - 1 && value >= 95) { 
     // No other matches, cap at last size 
     return arr[i]['col']; // col number 
    } else if (mindiff === null || diff < mindiff) { 
     // First value or trend decreasing 
     closest = i; 
     mindiff = diff; 
     } else { 
     return arr[closest]['col']; // col number 
    } 
    } 
    // Invalid 
    return null; 
}