拖动调整引导列的大小 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 列的情况。我更改了以下部分：

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