在調整大小時移動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(); 

    }); 

如何優化腳本？

UPDATE：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') 
    } 
}