C'è un modo per controllare l'ordinamento degli elementi quando si utilizza jquery ui

Question

Ho un div ordinabile (#sortable) con elementi (.draggable) al suo interno. Lì dentro, quando ordino gli elementi dal basso verso l'alto, gli elementi possono essere facilmente ordinati trascinando verso l'alto e non devo trascinare molto verso l'alto. Ma quando si ordinano gli elementi dal basso verso l'alto, devo trascinare l'elemento molto più in basso di quanto desiderato. C'è un modo per controllare l'ordinamento degli elementi, in modo che anche se trascino solo un po 'in alto/in basso e non completamente su/giù, mostrerà il segnaposto per posizionare l'elemento rispettivamente?

Demo a codepen.

js

$('#content #sortable').sortable({ 
    handle: '.drag_handle', 
    placeholder: "ui-state-highlight", 
    axis: "y" 
    }); 

    $('#blocks .draggable').draggable({ 
    helper: "clone", 
    revert: "invalid", 
    connectToSortable: '#content #sortable' 
    }); 

aggiornamento

ordinamento verso l'alto

ordinamento verso l'alto è facile come io non devo trascinare l'elemento di tutta la strada fino sopra l'elemento che voglio ordinare con.

ordinamento verso il basso

ordinamento verso il basso è difficile come devo trascinare l'elemento fino in fondo sotto l'elemento che voglio ordinare con.

Answer 1

Basta modificare l'opzione tolerance del sortable API a "pointer". Questa opzione renderà il draggable considerato nel segnaposto quando il cursore si trova su di esso (ciò di cui hai bisogno in questo momento) invece di aspettare che oltre il 50% dell'elemento si sovrapponga al segnaposto. Questo era il motivo per cui dovevi scorrere troppo in basso per poterlo ordinare.

$('#content #sortable').sortable({ 
    handle: '.drag_handle', 
    placeholder: "ui-state-highlight", 
    tolerance: "pointer" 
}); 

Ecco la versione aggiornata di CodePen