javascript - 追加响应

我将元素从.copyfilterArea更改为.copyfilter .container-margin进行响应，如果分辨率小于768px，则将元素移动..到目前为止，功能正常，但是如果分辨率大于768px，则将div回到原始位置。只有这部分我做不到，如何更改代码以将div返回到原始位置？我尝试追加但没有任何变化

 $(function () {
    var flag;
    $(window).resize(function () {
        var bodyWidth = $(window).width();
        console.log(bodyWidth)
        if (flag !== false && bodyWidth < 768) {
            //move the element to new location
            $('.copyFilterArea').appendTo('.copyFilter .container-margin');
            flag = false;
        } else if (flag !== true && bodyWidth >= 768) {
          //put it back to original location
            console.log('more')
            flag = true;
        }
    }).resize();
});

.copyFilter .container-margin{
  padding:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="copyFilterArea">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p>
</div>


<div class="copyFilter">
  <div class="container-margin">
    <h1>COPY CONTENT WİLL BE HERE</h1>
  </div>
</div>

最佳答案

使用prependTo将文本置于初始状态：

$(function () {
    var flag;
    $(window).resize(function () {
        var bodyWidth = $(window).width();
        console.log(bodyWidth)
        if (flag !== false && bodyWidth < 768) {
            //move the element to new location
            $('.copyFilterArea').appendTo('.copyFilter .container-margin');
            flag = false;
        } else if (flag !== true && bodyWidth >= 768) {
          //put it back to original location
           $('.copyFilterArea').prependTo('.copyFilter .container-margin');
            console.log('more')
            flag = true;
        }
    }).resize();
});

.copyFilter .container-margin{
  padding:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="copyFilterArea">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p>
</div>


<div class="copyFilter">
  <div class="container-margin">
    <h1>COPY CONTENT WİLL BE HERE</h1>
  </div>
</div>

关于javascript - 追加响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43583963/