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。

<强>更新

从随机的地方拿走它 -

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

根据您发布的内容，这是一个工作代码段

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

响应jQuery中的resize事件

2 个答案: