< Back to Code

Moving DIV up and down using jquery

div 1
div 2
div 3
div 4
<style>
  .container {
    width: 500px;
    margin: 0 auto;
  }
  .container > div {
    display: flex;
    margin: 3px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
    align-items: space-between;
    justify-content: space-between;
  }
  .container > div > span {
    font-weight: bold;
    font-size: 18px;
    width: 80%;
  }
</style>
<div class="container">
  <div class="div1">
    <span>div 1</span><button class="btn-up">Up</button
    ><button class="btn-down">Dn</button>
  </div>
  <div class="div2">
    <span>div 2</span><button class="btn-up">Up</button
    ><button class="btn-down">Dn</button>
  </div>
  <div class="div3">
    <span>div 3</span><button class="btn-up">Up</button
    ><button class="btn-down">Dn</button>
  </div>
  <div class="div4">
    <span>div 4</span><button class="btn-up">Up</button
    ><button class="btn-down">Dn</button>
  </div>
</div>
<script>
  $(document).ready(function () {
    $(".btn-down").on("click", function () {
      let pparent = $(this).parent();
      pparent.next().insertBefore(pparent);
    });

    $(".btn-up").on("click", function () {
      let pparent = $(this).parent();
      pparent.prev().insertAfter(pparent);
    });
  });
</script>
vi