Nestable list height of items make equally

Question

I have this problem and I tried everything I am using this plugin: [Nestable][1]

I am using this js code to make the items in front of each other have the same height so this is the code:

So far this is good, but when I drag the item and drop the height does not work, since the item moves with its id and the js code above does not match, is there anyway that can make this work.. This is what it looks like:

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

You could do something like this after you dragged an item. (Note: place the code in ready() in an event handler that executes after you dropped an item.)

The code gets the elements in both columns. Then depending on what is the largest column it sets the height depending on the highest element.

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