物品的稳定列表高度相同

Question

我有这个问题，我尝试了我使用这个插件的所有内容：[Nestable] [1]

我使用这个js代码使彼此前面的项目具有相同的高度，所以这是代码：

到目前为止，这是好的，但是当我拖动项目并且删除高度不起作用时，由于项目移动了它的id并且上面的js代码不匹配，无论如何都可以使这个工作..这就是它好像：

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };


    // activate Nestable for list 1
    $('#nestable3').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable4').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable3').data('output', $('#nestable3-output')));
    updateOutput($('#nestable4').data('output', $('#nestable4-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable5').nestable();

});

$(document).ready(function(){
    var n3 = $('#nestable3').find('.dd3-handle');
    var n4 = $('#nestable4').find('.dd3-handle');

    if(n3.size() > n4.size()) {
        var largest = n3;
        var smallest = n4;
    }
    else {
        var largest = n4;
        var smallest = n3;
    }

    for(var i = 0; i < smallest.size(); i++) {
        if(smallest.eq(i).height() > largest.eq(i).height()) {
            largest.eq(i).height(smallest.eq(i).height());
        }
        else {
            smallest.eq(i).height(largest.eq(i).height());
        }
    }
});

  
    
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; }
*:first-child+html .cf { zoom: 1; }





a { color: #2996cc; }
a:hover { text-decoration: none; }

p { line-height: 1.5em; }
.small { color: #666; font-size: 0.875em; }
.large { font-size: 1.25em; }

/**
 * Nestable
 */

.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }

.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

/**
 * Nestable Extras
 */

.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0;  padding-top: 20px;}

#nestable-menu { padding: 0; margin: 20px 0; }

#nestable-output,
#nestable2-output #nestable4-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestable2 .dd-handle,  #nestable4 .dd-handle{
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background:         linear-gradient(top, #bbb 0%, #999 100%);
}
#nestable2   .dd-handle:hover, #nestable4   .dd-handle:hover  { background: #bbb; }
#nestable2  .dd-item > button:before, #nestable4 .dd-item > button:before { color: #fff; }


@media only screen and (min-width: 700px) {

    .dd { float: left; width: 48%; }
    .dd + .dd { margin-left: 2%; }
    .dd3-handle:before {
    content: '≡';
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 84%;
    text-align: right;
    text-indent: 0;
    color: #000;
    font-size: 30px;
    font-weight: 700;
  }
  .dd-handle{
    width: 400px;
    height: auto;
    background: #f2f2f2;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-style: normal; 
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    padding-top: 10px;
    border: solid 1px #b7b7b7;
  }
  #nestable4 .dd-handle{
    width: 400px;
  
    background: #f2f2f2;
    font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-style: normal; 
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    padding-top: 10px;
    border: solid 1px #b7b7b7;
  }
  .dd{
    padding-left: 12px;
  }
    

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://dbushell.com/Nestable/jquery.nestable.js"></script>

    <div class="cf nestable-lists">
        <div class="dd" id="nestable3">
           <ol class="dd-list" >
                <li class="dd-item">
                  <div class="dd-handle dd3-handle" ><label id="matchline-static1" class=" boxi">Something1</label></div>
                  

                </li>
                 <li class="dd-item">
                  <div class="dd-handle dd3-handle" ><label id="matchline-static2" class=" boxi">Something1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </label></div>
                  

                </li>
                 <li class="dd-item">
                  <div class="dd-handle dd3-handle" ><label id="matchline-static3" class=" boxi">Something1</label></div>
                  

                </li>
                 <li class="dd-item">
                  <div class="dd-handle dd3-handle" ><label id="matchline-static4" class=" boxi">Something1</label></div>
                  

                </li>
            
            </ol>
        </div>    
    <div class="dd" id="nestable4">
        <ol class="dd-list">

                  <li class="dd-item"  >
                      <div class="dd-handle dd3-handle"  ><label id="matchline-dynamic1" class=" boxi">Blla test aoid jia sjd</label></div>
                     
                  </li>
                      <li class="dd-item"  >
                      <div class="dd-handle dd3-handle"  ><label id="matchline-dynamic2" class=" boxi">Blla test aoid jia sjd</label></div>
                     
                  </li>
                      <li class="dd-item"  >
                      <div class="dd-handle dd3-handle"  ><label id="matchline-dynamic3" class=" boxi">Blla test aoid jia sjd</label></div>
                     
                  </li>
                      <li class="dd-item"  >
                      <div class="dd-handle dd3-handle"  ><label id="matchline-dynamic4" class=" boxi">Blla test aoid jia sjd</label></div>
                     
                  </li>
          </ol>
        </div>
      </div>

Answer 1

拖动项目后，您可以执行类似的操作。 （注意：将代码放在ready()中，在放置项目后执行的事件处理程序中。）

代码获取两列中的元素。然后，根据最大的列，它根据最高元素设置高度。

$(document).ready(function(){
    var n3 = $('#nestable3').find('.dd3-handle');
    var n4 = $('#nestable4').find('.dd3-handle');

    if(n3.size() > n4.size()) {
        var largest = n3;
        var smallest = n4;
    }
    else {
        var largest = n4;
        var smallest = n3;
    }

    for(var i = 0; i < smallest.size(); i++) {
        if(smallest.eq(i).height() > largest.eq(i).height()) {
            largest.eq(i).height(smallest.eq(i).height());
        }
        else {
            smallest.eq(i).height(largest.eq(i).height());
        }
    }
});

#matchline-dynamic2, #matchline-dynamic1{
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cf nestable-lists">
  <div class="dd" id="nestable3">
    <ol class="dd-list" >
      <li class="dd-item">
        <div class="dd-handle dd3-handle"><label id="matchline-static1" class=" boxi">Something1</label></div>
        <div class="dd-handle dd3-handle"><label id="matchline-dynamic2" class=" boxi">Something else  askajd as </label></div>
        <div class="dd-handle dd3-handle"><label id="matchline-static2" class=" boxi">Something2</label></div>
        <div class="dd-handle dd3-handle"><label id="matchline-static3" class=" boxi">Something3</label></div>
        <div class="dd-handle dd3-handle"><label id="matchline-static4" class=" boxi">Something4 more texte here lorem ipsum asdkj lkas dassdkdjsjdsd</label></div>

      </li>
    </ol>
  </div>    
  <div class="dd" id="nestable4">
    <ol class="dd-list">
      <li class="dd-item"  >
        <div class="dd-handle dd3-handle"><label id="matchline-dynamic1" class=" boxi">Blla test aoid jia sjd</label></div>        
        <div class="dd-handle dd3-handle"><label id="matchline-dynamic3" class=" boxi">Blla </label></div>
        <div class="dd-handle dd3-handle"><label id="matchline-dynamic4" class=" boxi">Blla </label></div>
      </li>
    </ol>
  </div>
</div>