jQuery Ui - Draggable sets sortable revert speed

by Sreekesh S K

HTML

<ul id="sortable-1">
      <li class="default">
          <span class="counter">1</span>
         <span class="span1">Set1</span>
         <span class="span2">Set1</span>
    </li>
       <li class="default">
          <span class="counter">2</span>
         <span class="span1">Set2</span>
         <span class="span2">Set2</span>
    </li> 
    <li class="default">
          <span class="counter">3</span>
         <span class="span1">Set3</span>
         <span class="span2">Set3</span>
    </li>
   </ul>

CSS

#sortable-1 { list-style-type: none; margin: 0; 
         padding: 0; width: 100%; }
      #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: none;
         border: none;
         color: #333333;
      }

.span1{float: left;width:30%;background:#ccc;margin-right:20px}
.span2{float: left;width:30%;background:#ccc;margin-right:20px}
.counter {width: 10%;float: left;background:#ccc;margin-right:20px}

.new{background-color:green;}

JavaScript

$(function() {
         $( "#sortable-1" ).sortable({
    update: function(event, ui) {
      $('.counter').each(function(index){
         $(this).html(index + 1);
      });
    }
});
    $('.default').each(function(e,s) {
 		$(s).children('.span1').on('click',function(){
        	$(s).children('.span2').removeClass('new');
            $(s).children('.span1').addClass('new');
        })
        $(s).children('.span2').on('click',function(){
        	$(s).children('.span1').removeClass('new');
            $(s).children('.span2').addClass('new');
        })
	});
});