调整大小时移动 html 元素

Question

我有一个图标列表，根据视口放置在 DOM 中。到目前为止，我的脚本可以工作，但不能调整大小。我总是只需按键盘上的 F5。

怎么了？

    $(document).ready(function() {
        //
        // functions
        //
        // ----------------------------------------------------------------------------
        // select dom element and move to another 
        // ele = element to move, wrapper = element parant
        var moveEle = function(ele,wrapper) {
            var getContent = $(ele).contents();
            $(getContent).detach().appendTo(wrapper);
        }
        //
        // modernizr
        //
        // ----------------------------------------------------------------------------
        //** viewport check
        $(window).on( "resize", function() {
          var query = Modernizr.mq('(min-width: 992px)');
          if (query) {
                moveEle('.action-icons', '.wrap-action-links');
          } else {
                moveEle('.action-icons', '.quick-links');
          }
        }).resize();
    });

如何优化脚本？

更新：https://jsfiddle.net/3bhbcw60/2/

Answer 1

您可以通过 matchMedia 执行此操作：

if (matchMedia) {
  var mq = window.matchMedia("(min-width: 767px)");
  mq.addListener(cld_mediaquery_changed);
  cld_mediaquery_changed(mq);
}
function cld_mediaquery_changed(mq) {
  if (mq.matches) {
    $('.lorem').detach().appendTo('.box-one')
  } else {
    $('.lorem').detach().appendTo('.box-two')
  }
}