jQuery UI triable et déplaçable. Obtention de l'index d'un élément déplacé - jquery, jquery-ui, jquery-ui-sortable, jquery-ui-draggable

Je rencontre un problème très spécifique avec jQueryUI triable et glissable ensemble. Je veux pouvoir obtenir l'index / le placement dans la liste du nouvel élément déplacé. Je peux l'obtenir si je déplace les éléments dans la liste.

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

Le code ci-dessus fonctionne comme il se doit, mais si je fais la même chose avec l'élément glissé

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

utiliser ui.item.index renvoie simplement 0, si je fais la même chose dans stop: au lieu de receive: il renvoie -1 à la place, et cela n’importe où il est abandonné.

Réponses:

Voici la solution pour obtenir l’index de l’élément ADDED dans la liste triable.

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

Essaye ça:

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

ou essayez ceci:

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