title: How to reorder a ul li list by clicking on an link or button?
body: <p>I need to move some selected items from a list by clicking on a link or button.</p>
  
  <p>Giving 4 options to the user:
  Put all selected items once backward or forward, or instead put all to the top of the list or to the bottom of the list.</p>
  
  <p>I found a Jquery plugin that I'm using called <a href="http://tinysort.sjeiti.com/" rel="nofollow">jquery.tinysort.js</a></p>
  
  <p>Actually, I don't need to use this plugin, could be any plugin or code, just need to work properly.</p>
  
  <p>Follow a link to see a demo <a href="http://jsfiddle.net/dkwZZ/" rel="nofollow">http://jsfiddle.net/dkwZZ/</a></p>
  
  <p>Follow the html code:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;p&gt;
              &lt;a onclick="$('ul#ordenar&gt;li').tsort({attr:'id'});"&gt;REFRESH ORDER&lt;/a&gt; or 
              &lt;a onclick="$('ul#ordenar&gt;li').tsort('div[class=checkTrue]');"&gt;ALL SELECTED TO TOP&lt;/a&gt; or 
              &lt;a onclick="$('ul#ordenar&gt;li').tsort('div[class=checkFalse]');"&gt;ALL SELECTED TO BOTTOM&lt;/a&gt; or 
              &lt;a&gt;ALL SELECTED ONCE UP&lt;/a&gt; or
              &lt;a&gt;ALL SELECTED ONCE DOWN&lt;/a&gt; 
          &lt;/p&gt;
          &lt;ul class="" id="ordenar"&gt;
              &lt;li id="0"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste0&lt;/li&gt;
              &lt;li id="1"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste1&lt;/li&gt;
              &lt;li id="2"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste2&lt;/li&gt;
              &lt;li id="3"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste3&lt;/li&gt;
              &lt;li id="4"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste4&lt;/li&gt;
              &lt;li id="5"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste5&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When ALL SELECTED ONCE UP the order of the list should be:</p>
  
  <pre><code>        &lt;ul class="" id="ordenar"&gt;
              &lt;li id="0"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste0&lt;/li&gt;
              &lt;li id="1"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste1&lt;/li&gt;
              &lt;li id="3"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste3&lt;/li&gt;
              &lt;li id="2"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste2&lt;/li&gt;
              &lt;li id="5"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste5&lt;/li&gt;             
              &lt;li id="4"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste4&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>When ALL SELECTED ONCE DOWN the order of the list should be:</p>
  
  <pre><code>        &lt;ul class="" id="ordenar"&gt;
              &lt;li id="1"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste1&lt;/li&gt;
              &lt;li id="0"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste0&lt;/li&gt;
              &lt;li id="2"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste2&lt;/li&gt;
              &lt;li id="4"&gt;&lt;div class="checkFalse"&gt;&lt;/div&gt;checkFalse teste4&lt;/li&gt;
              &lt;li id="3"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste3&lt;/li&gt;
              &lt;li id="5"&gt;&lt;div class="checkTrue"&gt;&lt;/div&gt;checkTrue teste5&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>I will be eternally grateful if someone can help me.
  Cheers!!!</p>