title: jQuery moving elements up and down the row
body: <p>I would like to be able to move div elements up/down, in this case I cant use jQuery sortable, since the element, needs to be moved manually one at the time.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div&gt;First &lt;a class="up"&gt;UP&lt;/a&gt; | &lt;a class="down"&gt;DOWN&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Second &lt;a class="up"&gt;UP&lt;/a&gt; | &lt;a class="down"&gt;DOWN&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Third &lt;a class="up"&gt;UP&lt;/a&gt; | &lt;a class="down"&gt;DOWN&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Fourth &lt;a class="up"&gt;UP&lt;/a&gt; | &lt;a class="down"&gt;DOWN&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and here is js:</p>
  
  <pre><code>$(".up,.down").click(function(){
      var row = $(this).parent("div");
      if ($(this).is(".up")) {
          row.insertBefore(row.prev());
      } else {
          row.insertAfter(row.next());
      }
  });
  </code></pre>
  
  <p>The above works partially, sorting down is fine, but up, every top row disappears into top of the page, prepended to body tag.</p>