Sortable, Using CSS content: counter problem..

Sortable, Using CSS content: counter problem..

I have 4 items that i'm using with the sortable plugins, for this explanation let's just use A, B, C & D as the 4 items.

My problem is i'm trying to make them with a numerical list that will always be 1-4, so default it would be

1 - A
2 - B
3 - C
4 - D

Now my problem is that when I go to sort/drag/drop 4 to 2 it uses 5(I guess as the clone?) until the item is actually dropped and then recovers back to 4. 

My question is, using either the placeholder/clone option can I get it to not go out of the boundaries of the number of items, in this case 1-4, nothing more nothing less..?

CSS

  1. ul { counter-reset: item; }
  2.  #contentLeft Li:before { content: counter(item) ". "; counter-increment: item }

JS

  1. $(document).ready(function(){
  2. $(function() {
  3.       $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
  4.             var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
  5.             $.post("updateDB.php", order, function(theResponse){   
  6.                 $("#contentRight").html(theResponse);                                                  
  7.             });                                                             
  8.         }                                       
  9.         });
  10.     });
  11. }); 

Html

  1. <div id="contentLeft">
  2.             <ul>
  3.                <li>A</li>               
  4.                <li>B</li>  
  5.                <li>C</li>  
  6.                <li>D</li>  
  7.             </ul>
  8.         </div>