Question

我需要在窗口大小调整时将元素从一个div移动到另一个div。我的代码从左到右div工作精细移动元素，但我无法使元素从右向左移动div。感谢

标记：

<div class="container">
  <div class="row">
    <div class="col-10" id="left_bar">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#">All (181)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Special Editions (5)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Delivery (12)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Free delivery (4)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Italian (100)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Friend of Feudo (83)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pizza (6)</a>
        </li>
      </ul>
    </div>
    <div class="col-2" id="right_bar">
      <div class="dropdown col-12">
        <button type="button"
           id="dropdownMenuButton"
           class="btn btn-secondary dropdown-toggle"
           data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
            Other
          </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        </div>
      </div>
    </div>
  </div>
</div>

相关的JavaScript：

$(window).resize(function() {
    var left_bar = $('#left_bar').width();
    var right_bar = $('#right_bar').width();
    //$('#dim').html('left: '+left_bar+' - right:'+right_bar);
    var left_ele_dim = 0;
    $('#left_bar ul li').each(function(){
            left_ele_dim += $(this).width();
        if(left_ele_dim > left_bar){                    
            $(this).remove().appendTo($('.dropdown-menu'));
        }else{
            $(this).remove().appendTo($('.nav'));
        }
    });
});

Answer 1

嗯，这就是我所拥有的。

$(window).resize(function() {
  var left_bar = $('#left_bar').width();
  var right_bar = $('#right_bar').width();
  var left_ele_dim = 0;
  var move = false;
  var first = $("#right_bar li").first()[0];
  $('#left_bar li').each(function() {
    if(left_ele_dim + $(this).width() > left_bar) {
      move = true;
    }
    var width = $(this).width();
    if (move) {
      if (first != undefined) {
        $(this).remove().insertBefore($(first));
      } else {
        $(this).remove().appendTo($('.dropdown-menu'));
      }
      $(this).data("width", width);
    } else {
      left_ele_dim += width;
    }
  });
  move = true;
  $('#right_bar li').each(function() {
    if(left_ele_dim + $(this).data("width") > left_bar) {
      move = false;
    }
    if (move) {
      $(this).remove().appendTo($('.nav'));
      left_ele_dim += $("#left_bar li").last().width();
    }
  });
});

首先。这不起作用，因为你只通过#left_bar中的项目循环。第二。您不能只使用width()将元素从下拉列表中恢复。当它在内部下拉列表中时，它不会显示，因此width()将返回0.此外，您将li个项目放在下拉列表中，其中没有ul。我没有在这里解决它，但对你来说这可能是一个问题。

现在这是它的工作原理：

var move = false;确定是否移动所有其他项目。出于某种原因，你可能会遇到一些项目（不只是一个）应该一次移动的情况，我认为你想要保证它们的顺序。 first是存储当前第一个下拉项（如果存在）。还有一个在恢复它们时保存项目顺序的技巧。

在第一个循环中，您检查.nav中的所有项目。如果某些项目溢出宽度，则需要移动它以及之后的所有项目。所以你设置move = true。在移动之前，您可以保存它的当前宽度。

如果存在first元素，这意味着某些项目先前已移至下拉列表，因此它们具有“更大的索引”，您希望以后再恢复它们。这是一种堆栈。所以你之前插入新项目。否则，您只需将新项目附加到下拉列表。

然后设置data("width")以供进一步使用。

仅当您没有移动项目时，才将其宽度添加到总宽度。

在第二个循环中，您可以从下拉列表中检查项目。这里move的想法恰恰相反。如果你不能将这个项目移回导航，那么你也无法移动所有下一个项目。你可以通过阅读data("width")来查看它。如果您将项目移回导航，则使用$("#left_bar li").last().width()添加实际宽度，实际上可以与保存宽度不同。

如果使用大步骤调整窗口大小，此算法可能会遇到一些问题，但在手动调整大小时，它可以正常工作。

Jquery将菜单元素从一个div移动到另一个div

1 个答案: