Обновление порядка сортировки во время события изменения сортировки - jQuery UI

Question

Я хочу, чтобы значение элемента списка являлось индексом отсортированной позиции во время события сортировки.

Это значение должно автоматически обновляться в течение события изменения сортировки.

 <script type="text/javascript"> 
     $(function() { 
      $('#sortable').sortable({ 
       start : function(event, ui) { 
        var start_pos = ui.item.index(); 
        ui.item.data('start_pos', start_pos); 
       }, 
       change : function(event, ui) { 
        var start_pos = ui.item.data('start_pos'); 
        var index = ui.placeholder.index(); 

        if (start_pos < index) { 
         $('#sortable li:nth-child(' + index + ')').html(index-2); 
        } else { 
         $('#sortable li:eq(' + (index + 1) + ')').html(index + 1); 
        } 
       }, 
       update : function(event, ui) { 
        var index = ui.item.index(); 
        $('#sortable li:nth-child(' + (index + 1) + ')').html(index); 

       }, 
       axis : 'y' 
      }); 
     }); 


    </script> 

Я создал скрипку http://jsfiddle.net/jagan2explore/4mcpq/

объяснить мое требование.

Если я перемещаю 1-й элемент на 5-ю позицию, все остальные значения элементов обновляются корректно, Если я переместил 5-й на 1-ое значение, обновите значение соответствующим образом.

Предположим, если я перемещаю элемент списка от 1 до 5 & от 5 до 2, не выходя из (во время события одиночной сортировки), значения не обновляются соответствующим образом.

Мне что-то не хватает ???

Любая помощь была бы принята с благодарностью. Заранее спасибо

Answer 1

Попробуйте это:

update : function(event, ui) { 
    var index = ui.item.index(); 
    var start_pos = ui.item.data('start_pos'); 

    //update the html of the moved item to the current index 
    $('#sortable li:nth-child(' + (index + 1) + ')').html(index); 

    if (start_pos < index) { 
     //update the items before the re-ordered item 
     for(var i=index; i > 0; i--){ 
      $('#sortable li:nth-child(' + i + ')').html(i - 1); 
     } 
    }else { 
     //update the items after the re-ordered item 
     for(var i=index+2;i <= $("#sortable li").length; i++){ 
      $('#sortable li:nth-child(' + i + ')').html(i-1); 
     } 
    } 
}, 

Демо: jsfiddle

Answer 2

Я обновил свою скрипку с другим подходом, кажется, работает, как ожидалось:

  $(function() { 
      $('#sortable').sortable({ 
       start : function(event, ui) { 
        var start_pos = ui.item.index(); 
        ui.item.data('start_pos', start_pos); 
       }, 
       change : function(event, ui) { 
        var start_pos = ui.item.data('start_pos'); 
        var index = ui.placeholder.index(); 


        cIndex = (start_pos < index) ? index-2 : index-1; 
        ui.placeholder.prevAll('li').each(function(){ 
         $this = $(this); 
         if($this.is(ui.item)) {return;} 
         $this.html(cIndex); 
         cIndex--; 
        }); 

        cIndex = (start_pos < index) ? index : index+1; 
        ui.placeholder.nextAll('li').each(function(){ 
         $this = $(this); 
         if($this.is(ui.item)) return; 
         $this.html(cIndex) 
         cIndex++; 
        }); 

        ui.item.html((start_pos < index) ? index-1 : index); 
       }, 
       axis : 'y' 
      }); 
     }); 

Demo Here's the fiddle !