Sortable: Show placeholder's position and give it a number
In some cases while sorting a lot of elements you might find it useful to know the exact numeric position of what you're dragging:
-
<style type="text/css">
.ui-sort-position {
text-align: center;
font-size: 3.8em;
}
</style>
<script javascript="text/javascript">
$("#sortable").sortable({
placeholder: 'ui-state-highlight ui-sort-position',
helper: 'clone',
sort: function(e,ui){
/* The trick is that jQuery hides the inline element while user drags an absolute positioned clone so we want to deal only with the visible elements. Index order + 1 = UI order.*/
$(ui.placeholder).html(Number($("#categories > li:visible").index(ui.placeholder)+1));
}
});
</script>
Hope someone find it useful.