jQuery UI ordinabile e trascinabile. Ottenere l'indice dell'elemento trascinato - jquery, jquery-ui, jquery-ui-sortable, jquery-ui-draggable

Sto avendo un problema molto specifico, usando jQueryUI ordinabile e trascinabile insieme. Voglio essere in grado di ottenere l'indice / il posizionamento nell'elenco dell'elemento appena trascinato. Sono in grado di ottenere questo se sposto gli elementi all'interno della lista.

$("#draggable").draggable({
cursor: "move",
helper: "clone",
connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
items: "li",
stop: function(event, ui) {
index = ui.item.index()+1;
console.lo(index);
},
connectWith: ".sortableSub",
appendTo: "body",
}).disableSelection();

Il codice sopra funziona come dovrebbe, ma se faccio lo stesso con l'elemento trascinato.

receive: function(event, ui) {
console.log(ui.item.index());
},

usando ui.item.index restituisce solo 0, se faccio lo stesso in stop: invece di receive: restituisce -1 invece, e non importa dove viene rilasciato.

risposte:

ecco la soluzione su come ottenere l'indice dell'elemento AGGIUNTO nella lista ordinabile.

receive: function( event, ui ) {
var newIndex = $(this).data("ui-sortable").currentItem.index()
}

Prova questo:

$("#draggable").draggable({
cursor: "move",
helper: "clone",
connectToSortable: ".sortable"
});
$( ".sortable" ).sortable({
items: "li",
stop: function(event, ui) {
index = ui.item.index()+1;
console.log(index);
},
connectWith: ".sortableSub",
appendTo: "body",
}).disableSelection();

$( "#draggable" ).on( "dragcreate", function( event, ui ) {

console.log(ui.item.index());
});

o prova questo:

$("#draggable").draggable({
cursor: "move",
helper: "clone",
connectToSortable: ".sortable",
create: function( event, ui ) {
var index = ui.item.index()+1;
console.log(index);
}
});
$( ".sortable" ).sortable({
items: "li",
stop: function(event, ui) {
index = ui.item.index()+1;
console.log(index);
},
connectWith: ".sortableSub",
appendTo: "body",
}).disableSelection();