javascript - 响应jQuery中的调整大小事件

这是我尝试过的：

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/，这样它就不会占用太多资源。

先感谢您。

最佳答案

好吧，您可以使用以下方法：

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

关于javascript - 响应jQuery中的调整大小事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30233491/