Как получить индекс элемента под перетаскиваемым на событие «sortover» с jQuery UI Sortable?

Question

Я знаю, это кажется странным, потому что уже есть событие обновления. Но я использую библиотеку touch-punch, чтобы использовать функции пользовательского интерфейса jQuery на сенсорных устройствах. Но, например, в браузере Chrome Nexus 7 обновление не срабатывает. Вот почему я пытаюсь исправить это с запуском события sortupdate события sortover.

Проблема в том, что я не знаю, как получить индекс элемента под перетаскиваемым элементом. ui.item возвращает индекс только перетаскиваемого элемента. Есть ли встроенная функция jQuery для этого? Получение индекса с помощью проверок с помощью мыши/наведения не будет работать, потому что перетаскиваемый элемент больше, чем 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; 
} 

Answer 1

Я не совсем уверен, что это то, что вы хотите. Но, по крайней мере, код способен определить, какой элемент вы висите. Я также тестировал его с сенсорным ударом на своем Samsung S6, и он обнаруживает, какой элемент завис.

Я добавил код из другого сообщения в stackoverflow, чтобы определить, какой элемент завис. И затем я беру html из этого элемента.

Я не уверен, на какой индекс вы ссылаетесь, но по крайней мере это дает вам элемент.

JSFiddle: JSFiddle

var start_sort_index, 
over_sort_index, 
update_sort_index; 

$('#sortable').sortable({ 
     containment: 'parent', 
     cursor: 'move', 
    start: function(event, ui) { 
     var draggedItem = ui.item; 
     $(window).mousemove(function(e){ 
     moved(e, draggedItem); 
     }); 
    }, 
    stop: function(event, ui) { 
     $(window).unbind("mousemove"); 
    }, 
}); 

//Code from http://stackoverflow.com/questions/3298712/jquery-ui-sortable-determine-which-element-is-beneath-the-element-being-dragge 
function moved(e, draggedItem) { 
    //Dragged item's position++ 
    var dpos = draggedItem.position(); 
    var d = { 
    top: dpos.top, 
    bottom: dpos.top + draggedItem.height(), 
    left: dpos.left, 
    right: dpos.left + draggedItem.width() 
    }; 

    //Find sortable elements (li's) covered by draggedItem 
    var hoveredOver = $('.sortable').not(draggedItem).not($(".ui-sortable-placeholder")).filter(function() { 
    var t = $(this); 
    var pos = t.position(); 

    //This li's position++ 
    var p = { 
     top: pos.top, 
     bottom: pos.top + t.height(), 
     left: pos.left, 
     right: pos.left + t.width() 
    }; 

    //itc = intersect 
    var itcTop   = p.top <= d.bottom; 
    var itcBtm   = d.top <= p.bottom; 
    var itcLeft  = p.left <= d.right; 
    var itcRight  = d.left <= p.right; 

    return itcTop && itcBtm && itcLeft && itcRight; 
    }); 

    if(hoveredOver.length){ 
    $('.hovering-output').html(hoveredOver.html() + " is being hovered"); 
    console.log(hoveredOver); 
    } else{ 
    $('.hovering-output').html(""); 
    } 
};