Как использовать jquery для перемещения div вверх после события щелчка

Question

То, что у меня есть в области js, есть то, что у меня есть сейчас, на самом деле это ничего не делает.

$(".blocks .block").on('click', function() {
    $(this).parent().hide().prependTo(".blocks").slideDown()
});

Я пытаюсь использовать DOM для добавления события, когда при щелчке по одному блоку он перемещается наверх других блоков. Я пробовал .prependTo () и .position (). Ничего из того, что я делаю, похоже, не работает, может ли кто-нибудь помочь?

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

    <div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
    </div>

Answer 1

prependTo отлично подходит для этого!

Ваш код не работает, потому что с prependTo() у вас должно быть child.prependTo(parent) вместо prepend(), где у вас должно быть parent.prepend(child) ( ссылка ). Кажется, вы добавляете к себе $(this).parent(), которое является .blocks.

$(".block").click(function(){
    $(this).prependTo(".blocks");
});

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
</div>

Answer 2

$(".block").on('click', function(event){
    $(".blocks").prepend($(this))
 
});

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

<div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>