Wie erhält man den Index eines Elements unter dem gezogenen Ereignis "sortover" mit jQuery UI Sortable?

Question

Ich weiß, das scheint seltsam, weil es bereits ein Update-Ereignis gibt. Aber ich verwende die Bibliothek touch-punch, um die jQuery UI-Funktionen auf Touch-Geräten zu ermöglichen. Aber z. B. im Chrome-Browser des Nexus 7 wird das Update-Ereignis nicht ausgelöst. Deshalb versuche ich es zu beheben, indem ich das Ereignis sortupdate aus dem Ereignis sortover auslöst.

Das Problem ist, dass ich nicht weiß, wie man den Index des Elements unter dem gezogenen Element erhält. ui.item gibt nur den Index des gezogenen Elements zurück. Gibt es dafür eine eingebaute jQuery UI-Funktion? Den Index per Mouseover/Hover Checks zu erhalten, würde nicht funktionieren, da das gezogene Element größer ist als das mousecursor. von Cursorposition die Elemente Index immer scheint auch sehr schwierig ...

Hier ist eine Geige: https://jsfiddle.net/8sjLw6kL/2/

Code: 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

Ich bin nicht ganz sicher, das ist, was Sie wollen. Aber zumindest kann der Code herausfinden, welches Element Sie gerade schweben. Ich habe es auch mit Touch-Punch auf meinem Samsung S6 getestet und es erkennt, welches Element schwebt.

Ich habe Code aus einem anderen Beitrag in stackoverflow hinzugefügt, um zu erkennen, welches Element in der Schwebe ist. Und dann nehme ich den HTML-Code von diesem Element.

Ich bin nicht sicher, auf welchen Index Sie verweisen, aber das gibt Ihnen zumindest das Element.

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(""); 
    } 
};