title: Sorting list but retaining the CSS markup
body: <h2>Introduction</h2>
  
  <p>I currently have a list (with <code>ul</code> and <code>li</code>'s).</p>
  
  <p>It's made sortable using jQuery:</p>
  
  <pre><code>$( "#sortable1" ).sortable({
      update : function () {
      var items = $('#sortable1').sortable('serialize');
      alert(items);                       
      }
  });
  $( "#sortable1" ).disableSelection();
  </code></pre>
  
  <h2>The problem</h2>
  
  <p>This code moves the complete <code>li</code> item (including it's class - and thus it's markup).</p>
  
  <h2>The question</h2>
  
  <p>Is there any way to match the target's destination class? I've setup a demo here: <a href="http://tinker.io/65292" rel="nofollow">http://tinker.io/65292</a></p>
  
  <p>So basically, when moving <code>item 1</code> one place down, <code>item 1</code> should become green and <code>item 2</code> should become <code>red</code>.</p>
  
  <p>Additionally, when moving <code>item 1</code> two places down, <code>item 1</code> should be yellow, <code>item 2</code> should be red and finally <code>item 3</code> should be green.</p>
  
  <p>This demo list only exists of four items, but realistically this could be any number.</p>
  
  <h2>Demo code</h2>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;jQuery UI Sortable - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
    &lt;style&gt;
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
  
      .first { background-color: red; }
      .middle1 { background-color: green; }
      .middle2 { background-color: yellow; }
      .last { background-color: blue; }
    &lt;/style&gt;
    &lt;script&gt;
    $(function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ul id="sortable"&gt;
    &lt;li class="first"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt;
    &lt;li class="middle1"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt;
    &lt;li class="middle2"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 3&lt;/li&gt;
    &lt;li class="last"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Link: <a href="http://tinker.io/65292" rel="nofollow">http://tinker.io/65292</a></p>