Je veux déplacer mon élément p à l'intérieur dans .a vers .b div sur responsive par exemple sur 768px comment faire?

div{margin:10px;
padding:10px;}
.a{
background:#f0f0f0;
border:1px solid #ccc;
}
.b{
background:#999;
border:1px solid #666;
}
<div class="a">
<p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>
0
ani_css 5 avril 2017 à 14:09

2 réponses

Vous pouvez vérifier la largeur window, puis utiliser la méthode appendTo() pour déplacer l'élément de .a vers .b, comme ceci:

if ($(window).width() < 768) {
  $('.a p').appendTo('.b');
}
div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>

Si vous voulez le voir lors du redimensionnement du navigateur, vous pouvez utiliser $(window).resize(function(){ //your code here... }) avec le code ci-dessus. Quelque chose comme ça:

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.a p').appendTo('.b');
  }
}).resize();
div {
  margin: 10px;
  padding: 10px;
}

.a {
  background: #f0f0f0;
  border: 1px solid #ccc;
}

.b {
  background: #999;
  border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <p>lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>
2
Ionut Necula 5 avril 2017 à 11:23

Oui bien. Vous ne pouvez pas modifier votre structure HTML à l'aide de Css. Cela peut être fait avec quelques lignes de code.

window.addEventListener('load', function () {
    var a = document.querySelector('.a');
    var b = document.querySelector('.b');
    var c = document.querySelector('p');

    window.addEventListener('resize', function (event) {
        if (768 >= window.innerWidth && 'a' === c.dataset.location) {
            b.appendChild(c);
            c.dataset.location = 'b';
        } else if (768 < window.innerWidth && 'b' === c.dataset.location) {
            a.appendChild(c);
            c.dataset.location = 'a';
        }
    });
}, {once: true});
div {
    margin: 10px;
    padding: 10px;
}

.a {
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.b {
    background: #999;
    border: 1px solid #666;
}
<div class="a">
    <p data-location="a">lorem ipsum dolor site amet...</p>
</div>

<div class="b">

</div>
1
Pig Ball 5 avril 2017 à 11:25