JQuery 可排序和可调整大小的 3 列。使 div 变大会影响下面的整行答案

【问题标题】：JQuery sortable and resizable with 3 columns. Making div larger affects the whole row belowJQuery 可排序和可调整大小的 3 列。使 div 变大会影响下面的整行
【发布时间】：2018-07-31 12:34:20
【问题描述】：

检查小提琴：https://jsfiddle.net/Ltc246wx/35/

<div id="sortable">
  <div class="widget">
    ggg
  </div>
    <div class="widget">
    pppp
  </div>
    <div class="widget">
   ttt
  </div>
    <div class="widget">
    yyyy
  </div>
    <div class="widget">
    sds
  </div>
    <div class="widget">
    sdfsg
  </div>
    <div class="widget">
    vbbbbb
  </div>
    <div class="widget">
    mmmm
  </div>
    <div class="widget">
    nnn
  </div>
    <div class="widget">
    zzzz
  </div>
</div>

CSS：

.widget{
  background-color: red;
    margin: 5px 5px 10px 5px;
    padding: 0;
    min-width: 200px;
    width: 200px;
    height: 100px;  
    display: inline-block;
    vertical-align: top;
    /*float:left;*/
}

#sortable{
  width:100%;
  height:100%;

}

js:

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

    $(function() {
        $('.widget').resizable();
    });
});

我已经尝试了几个小时，但我无法弄清楚如何做出我想要的行为。

如果我调整“mmmm” div 的大小以获得更高的高度，下面的整行就会被向下推。我希望“mmmm” div 获得更高的高度，并且“zzzz” div 保持在其位置。请注意，jquery sortable 可以按我的意愿工作，但不能调整大小。

如果我使用 float:left 而不是 display: inline-block;和垂直对齐：顶部；。在这里摆弄：https://jsfiddle.net/Ltc246wx/36/。

但是，当调整大小时，右侧的所有 div 仍然会影响下面的整行。在右侧的每个 div 上使用 float:right 直到修复此行为，但它会使 Jquery 可排序无法在该 div 上工作。

有什么建议吗？我希望我已经足够清楚我希望它如何工作。

【问题讨论】：

认为您需要使用 masonry 插件来获得您想要的行为 - 也许将其绑定到调整大小结束事件
谢谢。有时间我会试一试，然后报告进展情况。

标签： html css jquery-ui jquery-ui-sortable jquery-ui-resizable

【解决方案1】：

调整大小时行被下推的原因是由于 html 元素流。

基本上，您希望为“portlet”提供绝对定位，这样当您调整 portlet 包含的一个小部件的大小时，其他 portlet 不会被推开。您还需要检测 portlet 之间的冲突，以便小部件不会重叠。

看看我制作的这个codepen：https://codepen.io/Souleste/pen/XwVzoQ

    // CREATE ZONE-COLS 
    function createCols() {
        $('.zone-inner').each(function(e) {
          var self = this;

          // get the zones width, divide by 12 to make 12 'columns'
          var zoneWidth = parseFloat(( $(self).width() ));
          var cols = Math.floor( (zoneWidth / 12) ); // make 12 columns
          var colP = ( (cols / zoneWidth) * 100 ); // one column percent of zone-inner
          var cols2 = Math.floor( cols * 2 ); // two columns
          var col2P = (colP) * 2; // two column percent of zone-inner
          var cols3 = Math.floor( cols * 4 ); // make 3 columns
          var col3P = (colP) * 4; // 3 columns percent of zone-inner

          var zoneHeight = ($(self).height()); 
          var rows = Math.floor( zoneHeight / cols3); 
          var colAmount = Math.floor( 5 );
          for (var x = 0; x < rows; x++) {
              for (var y = 0; y < colAmount; y++) {
                  $(self).append('<div class="zone-col absolute" style="min-width: '+ (col2P) +'%; min-height: '+ cols3 +'px; top:'+ (cols3 * x) +'px; left: '+ (cols2 * y) +'px; "></div>');
              }
          }
        });
    } createCols();

这里我只是在我的代码中创建名为“zone-cols”的 portlet，并将它们放置在所需的位置，我想要 5 个 portlet 分布，第六个会导致我的代码溢出，因为我的小部件将是 1 /3 区域的宽度，（3 列）；

一些“问题”：

这对我来说不是问题，但对您来说可能是一个问题：这将取消“可排序”功能，因为您无法将一个小部件拖到另一个小部件上并让他们交换位置，因此您需要做更多的工作。
一旦没有调整大小冲突并且用户想要进一步调整大小，他们必须停止调整大小并重新开始。一旦没有冲突，我就可以继续调整大小，但它只会影响最后一个小部件，可能是我的 .each() 循环有问题，但我无法弄清楚问题可能是什么。
调整大小不会压低任何小部件，我的项目中不需要它，因此您需要添加更多代码。

【讨论】：