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
- ul { counter-reset: item; }
- #contentLeft Li:before { content: counter(item) ". "; counter-increment: item }
JS
- $(document).ready(function(){
- $(function() {
- $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
- var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
- $.post("updateDB.php", order, function(theResponse){
- $("#contentRight").html(theResponse);
- });
- }
- });
- });
- });
Html
- <div id="contentLeft">
- <ul>
- <li>A</li>
- <li>B</li>
- <li>C</li>
- <li>D</li>
- </ul>
- </div>