JQuery UI Sortable ile "sortover" olayında sürüklenenin altında bir öğenin indeksi nasıl alınır?

Question

Bunun çok garip geldiğini biliyorum çünkü zaten bir güncelleme olayı var. Ama jQuery UI İşlevleri dokunmatik cihazlar üzerinde çalışmak için touch-punch kütüphanesini kullanıyorum. Ancak örneğin Nexus 7’nin Chrome tarayıcısında güncelleme etkinliği çalışmaz. Bu yüzden, olayını sortover olayından tetikleyerek düzeltmeye çalışıyorum.

Sorun şu ki, sürüklenen öğenin altındaki öğenin dizinini nasıl alacağımı bilmiyorum. ui.item sadece sürüklenen öğenin dizinini döndürür. Bunun için herhangi bir jQuery UI dahili işlevi var mı? Sürüklenen öğe mousecursor'dan daha büyük olduğu için dizgeyi fareyle üzerine getirme/vurgu denetimleri işe yaramaz. https://jsfiddle.net/8sjLw6kL/2/

Kodu: HTML:

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

JS:

İmleç konumuna da çok zor görünüyor tarafından unsurlar endeksi ... İşte

alınıyor bir keman olduğunu

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

Pek emin değilim bu ne istediğiniz değil. Ancak en azından kod, hangi öğenin üzerinde gezindiğinizi anlayabilmektedir. Samsung S6 cep telefonumda dokunma deliği ile de test ettim ve hangi elemanın üzerinde durduğunu tespit ettim.

Hangi öğenin üzerine gelindiğini algılamak için başka bir gönderiyi stackoverflow üzerinde ekledim. Ve sonra html'i o elementten alıyorum.

Hangi dizini kullandığınızdan emin değilim, ancak en azından bu size öğeyi verir.

JSFiddle: Herhangi sürüklenebilir elemanı altında almak için 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(""); 
    } 
};