JQuery UI : événement sortable sur nouveaux éléments.

Bonsoir à vous,

j'utilise sortable de jQuery UI pour déplacer les éléments dans un tableau.

Tout fonctionne parfaitement sauf quand j'ajoute dynamiquement un nouvel élément. L'action sur ce nouvel élément n'est pas possible.

Voici le code javascript que j'utilise :

$(".row_position").sortable({
    delay: 150,
    stop: function() {
        var arrayDragndrop = new Array();
 
        $('.row_position>tr').each(function() {
            arrayDragndrop.push($(this).attr("id"));
        });
 
        updateOrder(arrayDragndrop);
    }
});
 
function updateOrder(arrDragndrop) {
    $.ajax({
        url:'dragndrop.php',
        type:'POST',
        data:{arrPositions:arrDragndrop},
        success:function(response) {
            if (response != 1)
            {
                alert("Impossible de changer l'ordre des lignes !!!");
            }
        }
    })
}

N'y a-t-il pas moyen d'utilise le "on" quand on veut déclencher l'événement comme ceci par exemple :

$('#table_items').on('sortable', '.row_position', function(e) {}

Avez-vous une idée de ce que je dois faire pour que les nouveaux éléments puissent également être déplacés.

Merci d'avance

Bonne soirée,
Thierry
Modifié par THIRT05 (04 Sep 2020 - 19:30)

Hello,

J'ai regardé la doc de jQuery UI et il faut appeler la méthode sur le parent.
Ici, je pense que c'est #table_items et non 'row_position'. Mais vu que je ne possède pas tous les éléments, je ne peux que deviner.

J'ai essayé de reproduire le cas en ajoutant du contenu dynamiquement et ça fonctionne.

J'ai l'impression que 'row_position' contient des 'tr' qui doivent être manipuler. Si vraiment, l'appelle de la méthode sortable ne fonctionne pas sur le parent, il faudra passer par la délégation d'évènements. Il faudra 'écouter' les changements du DOM et ajouter la méthode sortable sur le parent.

Je mis à jour le fiddle: https://jsfiddle.net/5gkmns7f/1/
Modifié par allan00958 (05 Sep 2020 - 08:47)