javascript - 项目的可嵌套列表高度相等

Question

我遇到了这个问题，我尝试了所有使用这个插件的方法:[可嵌套][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>