问使项的嵌套列表高度相等

EN

$(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>