jQueryUIソート可能なプレースホルダーのインデックスが正しくない

Question

対応するデータ配列を持つソート可能なリストがあります。リストの並べ替えの順序を変更する必要があります。私は、一例として、このコード

o.dom.$editor.find('.sortable').sortable({ 
    start: function(event, ui) { 
     var start_pos = ui.item.index(); 
     ui.item.data('startIndex', start_pos); // store original index 
    }, 
    change: function(event, ui) { 
     var start_pos = ui.item.data('startIndex'); // get original index 
     var index = ui.placeholder.index() - 1; // get new index 
     console.log(start_pos, index); // log start and end positions for debugging 

     ui.item.data('startIndex', index); // store new index 
    } 
}); 

を使用し、のは、私はこのリストを持っているとしましょう：

A 
B 
C 

私はリストアイテムAを保持し、二回、下に変更イベントが発生し、それを下にドラッグし、最初のスワッピングアイテムAをアイテムB、次にAをC、コンソールに表示：

0 1 
1 2 

そして正しいです。今（前回ドラッグからマウスを解放せず）、私はCとのスワップ、再び2回変更イベントが発生し、トップにアイテムAをバックにドラッグし、その後、Bと、コンソールが表示さ：

2 1 
1 0 

すべての良いです。 今私は、マウスを解放し、AとBを交換し、一度変更イベントが発生し、先頭に項目Bのドラッグを開始、しかし、コンソールが表示される場合：

1 -1 

間違っているどの。何が起きてる？私は何時間もこれを理解しようとしてきました。

jsfiddle：​​

Answer 1

問題はvar index = ui.placeholder.index() - 1;ラインです。あなたは、最大ダウンからアイテムを移動するときに、アップからダウンに1

からui.placeholder.index()始まりのインデックスをアイテムを移動

• 、私はのロジックを変更した0

からui.placeholder.index()開始するための指標インデックスを取得しています。

$(function(){ 
 
    $('.sortable').sortable({ 
 
    start: function(event, ui) { 
 
\t var start_pos = ui.item.index(); 
 
\t ui.item.data('startIndex', start_pos); 
 
\t }, 
 
\t change: function(event, ui) { 
 
\t var start_pos = ui.item.data('startIndex'); 
 
\t var index = ui.placeholder.index(); 
 
\t index = (start_pos > index) ? index : index - 1; 
 
\t $("#output").append(start_pos + ' ' + index + '<br>'); 
 
     ui.item.data('startIndex', index); 
 
\t } 
 
    }); 
 
})

li{ 
 
    display: block; 
 
    background: lightgreen; 
 
    margin:20px 0; 
 
} 
 

 
#output{ 
 
    width:100%; 
 
    min-height: 20px; 
 
    background: lightgray; 
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<ul class='sortable'> 
 
    <li>A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
</ul> 
 

 
<div id="output">