javascript - 追加响应

Question

我将我的元素从 .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>

Answer 1

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