jquery - jQuery UI Sortableで「ソートオーバー」イベントでドラッグされた要素の下の要素のインデックスを取得する方法は?

Question

すでに更新イベントがあるため、これは奇妙に思えます。しかし、私はtouch-punchライブラリを使用して jQuery UI 関数をタッチ デバイスで動作させています。ただし、たとえば Nexus 7 の Chrome ブラウザでは update イベントは発生しません。sortupdateそのため、イベントからイベントをトリガーして修正しようとしていますsortover。

問題は、ドラッグされた要素の下にある要素のインデックスを取得する方法がわからないことです。ui.itemドラッグされた要素のインデックスのみを返します。このためのjQuery UI組み込み関数はありますか? ドラッグされた要素がmousecursor. カーソル位置で要素のインデックスを取得するのも非常に難しいようです...

ここにフィドルがあります： https://jsfiddle.net/8sjLw6kL/2/

コード: HTML:

<div id="sortable">
  <div class="sortable"> bla </div>
  <div class="sortable"> ble </div>
  <div class="sortable"> blu </div>
</div> 

JS:

var start_sort_index,
    over_sort_index,
    update_sort_index;

$('#sortable').sortable({
    helper: 'clone',                    
        containment: 'parent',
        cursor: 'move'
});

$('#sortable').on('sortstart', function(event, ui){
   start_sort_index = ui.item.index();
   console.log('start: '+start_sort_index);
});
$('#sortable').on('sortover', function(event, ui){
   over_sort_index = ui.item.index();
   console.log('over: '+over_sort_index);
   $('#sortable').trigger('sortupdate');
});
$('#sortable').on('sortover', function(event, ui){
    update_sort_index = (typeof ui !== 'undefined')?ui.item.index():over_sort_index;
  over_sort_index = undefined;
  //my other code here
});

CSS:

#sortable{
  width: 100%;  
    background-color: #ebebeb;  
    position: relative;
    margin-top: 10px;
  height: 60px;
 }  

.sortable{
  padding: 5px 10px;
  background-color: red;
  margin: 5px;
  float: left;
}