title: change class name when dragged and dropped and vice versa - jqueryUI
body: <p>I'm using jqueryUI to drag/drop list items from one list to another sortable list. Is there anyway I can change the class of the dropped item from 'sortedli' to 'droppedli' when it is dropped from all-colls-list into the sortable list coll-selected-list and vice versa? Currently when I drop it, it retains the original class name.</p>
  
  <pre><code>$(function() {
      var lists = [{"listid":"#all-colls-list", "connectid":"#coll-selected-list", "drop":true},
       {"listid":"#coll-selected-list", "connectid":"#all-colls-list", "drop":true}];
  
      $.each(lists, function(i, list) {
          $(list.listid).sortable({
              connectWith: list.connectid,
              dropOnEmpty: list.drop
          });
      });
  });
  
  &lt;ul id="all-colls-list" class="droptrue ui-sortable"&gt;
                  &lt;li class="sortedli"&gt;ahsbah&lt;/li&gt;
                  &lt;li class="sortedli"&gt;bachs&lt;/li&gt;
                  &lt;li class="sortedli"&gt;stah&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;ul id="coll-selected-list" class="droptrue ui-sortable"&gt;
                &lt;li class="sortedli" style=""&gt;blah&lt;/li&gt;
                &lt;li class="sortedli" style=""&gt;blah&lt;/li&gt;
                &lt;li class="sortedli" style=""&gt;blah&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>