響應調整事件的jQuery

Question

這是我已經試過：

if (jQuery(document).width() < 1024) { 
    jQuery('.anywhere_div').insertAfter('#a_fixed_position_div'); 
} 

我不知道該怎麼寫else，因爲我把它隨機放置在頁面上div和我它定位根據固定的div。

如果我再次調整窗口的大小，我不知道要把它放回去。

另外我怎樣才能添加一個像這樣的計時器http://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/，所以它不會使用很多資源。

預先感謝您。

Answer 1

那麼你可以如下使用：

DEMO HERE和FULL SCREEN DEMO HERE

HTML

<div id="a_fixed_position_div"> 
    Fixed Div 
</div> 

<div class='originalPlace'> 
    Original Place 
    <div class='anywhere_div'>AnyWhere Div</div> 
</div> 

JS

$(window).on('resize',function(){ 
if ($(window).width() < 1024) { 
    jQuery('.anywhere_div').detach().insertAfter('#a_fixed_position_div'); 
} 
else 
{ 
    jQuery(".anywhere_div").detach().appendTo('.originalPlace') 
} 
}); 

.detach()從原來的地方分離，並在適當位置定位DOM移動它。

UPDATE

採取從隨機的地方 -

var originalPlace=$('.anywhere_div').parent(); 
$(window).on('resize',function(){ 
    if ($(window).width() < 1024) { 
     jQuery('.anywhere_div').insertAfter('#a_fixed_position_div'); 
    } 
    else 
    { 
     jQuery(".anywhere_div").detach().appendTo(originalPlace); 
    } 
}); 

更新2

在這裏，我們要保存它的previous和next元素太多，如果有任何它會插入相應的，否則它會附加到它的parent，並希望這是你所需要的：

WORKING DEMO和WORKING DEMO FULL RESULT

HTML

<div id="a_fixed_position_div"> 
    Fixed Div 
</div> 

<div class='originalPlace'> 
    Original Place 
    <div class="firstElem">Prev Div</div> 
    <div class='anywhere_div'>AnyWhere Div</div> 
</div> 

JS

var originalPlace=$('.anywhere_div').parent(); 
var previousElement=$('.anywhere_div').prev(); 
var preLength=$('.anywhere_div').prev().length; 
var nextElement=$('.anywhere_div').next(); 
var nextLen=$('.anywhere_div').next().length; 

$(document).ready(function(){ 
    checkresize(); 
    $(window).on('resize',function(){ 
     checkresize(); 
    }); 
}); 
function checkresize() 
{ 
    if ($(window).width() < 1024) { 
     jQuery('.anywhere_div').insertAfter('#a_fixed_position_div'); 
    } 
    else 
    { 
     if(preLength!=0) 
      jQuery(".anywhere_div").detach().insertAfter(originalPlace.find(previousElement)); 
     else 
      if(nextLen!=0) 
       jQuery(".anywhere_div").detach().insertBefore(originalPlace.find(nextElement)); 
      else 
       jQuery(".anywhere_div").detach().appendTo(originalPlace); 
    } 
} 

要放回去

Answer 2

根據您所張貼這是什麼一個工作片斷

$(function(){ 
 
    
 
    var resizeId; 
 
    var size="big"; 
 
    var $placeholder = $("<!-- myElement -->"); 
 
    $(window).resize(function() { 
 
     clearTimeout(resizeId); 
 
     resizeId = setTimeout(doneResizing, 500); 
 
    }); 
 
    
 
    
 
    function doneResizing(){ 
 
    
 
    if ($(document).width() < 1024 && size=="big") { 
 
     
 
     size="small"; 
 
     
 
     $('.anywhere_div') 
 
     .before($placeholder) 
 
     .insertAfter('#a_fixed_position_div'); 
 
     
 
    } else if(size=="small") { 
 
     
 
     size="big"; 
 
     
 
     $placeholder 
 
     .after($('.anywhere_div')) 
 
     .remove(); 
 
     
 
    } 
 
    } 
 

 
    doneResizing(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a_fixed_position_div" style="height:100px; width:100px;"></div> 
 
<div id="another_fixed_position_div" style="height:100px; width:100px;"> 
 
    <div class="anywhere_div" style="height:100px; width:100px; background-color:#ff0000;"></div> 
 
</div>