拖动调整Bootstrap列的大小jQuery UI

Question

我正在尝试通过拖动来使Bootstrap行中的列按其各自的列大小逐步进行快速调整。它们必须始终相加为12列。 查看我想要实现的示例 最接近我所需的示例在这里：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;
}

任何帮助都将不胜感激。

- Matt Grey

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;
}
```

- Coding Friend

Answer 2

注意：这更像是一个澄清而不是一个答案，但是代码太多了无法放在评论中。

getClosest函数没有涵盖元素超过11列的情况。我更改了以下部分：

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

to:

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

- Anima-t3d

---

谢谢你的帮助！这些东西开始让我头疼起来。 - Matt Grey