Sort Sample And Make New jQuery Function Code

by Bilal AFSAR

HTML

<button id="before">before</button>
<button id="after">after</button>
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

CSS

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid red;
  border-radius: 7px;
  background-color: #EEE;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  display: inline-block;
}

div.active {
  background-color: yellow;
}

button {
  display: block;
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
}

JavaScript

$(function() {
  /*
      jQuery.fn.swapWith = function(to) {
      return this.each(function() {
          var copy_to = $(to).clone(true);
          var copy_from = $(this).clone(true);
          $(to).replaceWith(copy_from);
          $(this).replaceWith(copy_to);
      });
  };
  */
  $('div').on('click', function() {

    $('div').removeClass('active');
    $(this).addClass('active');

  });
  $('#before').on('click', function() {
    var t = $('div.active');
    t.before(t.next());
    //$(t).swapWith(t.next());
  });
  $('#after').on('click', function() {
    var t = $('div.active');
    t.after(t.prev());
  });




});