Append an responsive

Question

Ich bewegte mein Element von .copyfilterArea zu .copyfilter .container-margin zu reagieren, wenn meine Auflösung weniger als 768px dann bewegen Sie mein Element .. es ist soweit okay, Funktion funktioniert ordnungsgemäß, aber wenn meine Auflösung größer als 768px ist dann setzen mein Div zurück zum ursprünglichen Standort. Nur diesen Abschnitt konnte ich nicht ausführen. Wie kann ich meinen Code ändern, um das Div an den ursprünglichen Speicherort zurückzuversetzen? Ich habe versucht, Anfügen aber nichts ändern

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

Verwenden prependTo den Text im Ausgangszustand zu versetzen:

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

Answer 2

Wenn Sie ein Problem mit append mit Blick auf und entfernen Sie insbesondere Element in DOM zur Laufzeit dann alternative Sie können es mit ausblenden/zeigen Logik, wo Ihr Element wie folgt Duplizieren:

$(function() { 
 
    var flag; 
 
    $(".subFilterArea").hide(); 
 
    $(window).resize(function() { 
 
     var bodyWidth = $(window).width(); 
 
     console.log(bodyWidth) 
 
     if (flag !== false && bodyWidth < 768) { 
 
      //move the element to new location 
 
      $(".mainFilterArea").hide(); 
 
      $(".subFilterArea").show(); 
 
      flag = false; 
 
     } else if (flag !== true && bodyWidth >= 768) { 
 
      //put it back to original location 
 
      $(".mainFilterArea").show(); 
 
      $(".subFilterArea").hide(); 
 
      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 mainFilterArea"> 
 
    <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 class="copyFilterArea subFilterArea"> 
 
     <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> 
 
</div>

Answer 3

$(function() { 
    var flag; 
    var $copyFilterArea = $('.copyFilterArea') 
    $(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 
      if($("body").children(".copyFilterArea").length<=0){ 
      $copyFilterArea.prependTo($('body')) 
      } 
      console.log('more') 
      flag = true; 
     } 
    }).resize(); 
});