在调整大小时移动 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')
  }
}