La mise à jour de l'ordre de tri au cours de trier événement de changement - jQuery UI

Je veux la valeur de l'élément de la liste à l'index de la position assortie au cours de trier événement.

Cette valeur est mise à jour automatiquement lors de trier événement de changement.

        <script type="text/javascript">
        $(function() {
            $('#sortable').sortable({
                start : function(event, ui) {
                    var start_pos = ui.item.index();
                    ui.item.data('start_pos', start_pos);
                },
                change : function(event, ui) {
                    var start_pos = ui.item.data('start_pos');
                    var index = ui.placeholder.index();

                    if (start_pos < index) {
                        $('#sortable li:nth-child(' + index + ')').html(index-2);
                    } else {
                        $('#sortable li:eq(' + (index + 1) + ')').html(index + 1);
                    }
                },
                update : function(event, ui) {
                    var index = ui.item.index();
                    $('#sortable li:nth-child(' + (index + 1) + ')').html(index);

                },
                axis : 'y'
            });
        });


    </script>

J'ai créé un violon
http://jsfiddle.net/jagan2explore/4mcpq/

pour expliquer mon exigence.

Si je déménage 1 st élément à la 5ème position et tous les autres éléments, les valeurs sont mises à jour à juste titre,
Si je déplace la 5e à 1 st la valeur des mises à jour en conséquence.

Suppose que si je déplace un élément de la liste de 1 à 5 & de 5 à 2, sans quitter (en cours de tri unique de l'événement ), les valeurs ne sont pas mis à jour en conséquence.

Suis-je raté quelque chose??

Toute aide serait grandement appréciée. Merci d'avance

OriginalL'auteur Jagan K | 2013-04-18

  1. 15

    Essayez ceci:

    update : function(event, ui) {
    var index = ui.item.index();
    var start_pos = ui.item.data('start_pos');

    //update the html of the moved item to the current index
    $('#sortable li:nth-child(' + (index + 1) + ')').html(index);

    if (start_pos < index) {
        //update the items before the re-ordered item
        for(var i=index; i > 0; i--){
            $('#sortable li:nth-child(' + i + ')').html(i - 1);
        }
    }else {
        //update the items after the re-ordered item
        for(var i=index+2;i <= $("#sortable li").length; i++){
            $('#sortable li:nth-child(' + i + ')').html(i-1);
        }
    }
},

    Démo: jsfiddle

    Merci. C'est exactement ce dont j'ai besoin. Certains de plus d'aide s'il vous plaît. j'ai la possibilité de supprimer tout élément de la liste à l'aide de jQuery .méthode remove (). Supposons que permet de dire si l'utilisateur supprime 3ème point, je dois mettre à jour le reste des éléments à 3,4,5. Une idée de comment faire cela
    Vous pouvez utiliser la même logique que le fait de la re-numérotation de mettre à jour les éléments après que l'élément qui a été supprimé.
    Un Million De Merci @Terence. J'ai trouvé un moyen de le faire avec votre code. Je suis nouveau à jquery UI. Merci encore pour votre réponse.
    Qu'est-ce que j'ai personnalisé l'ordre et de la nécessité de le préserver, comme je suis à la commande d'une liste de 80 à 90 et j'ai besoin de garder les numéros ?
    merci pour une grande tranquillité d'magnifiquement code de travail!

    OriginalL'auteur Terence

  2. 1

    J'ai mis à jour votre violon avec une autre approche, elle semble fonctionner comme prévu:

                $(function() {
            $('#sortable').sortable({
                start : function(event, ui) {
                    var start_pos = ui.item.index();
                    ui.item.data('start_pos', start_pos);
                },
                change : function(event, ui) {
                    var start_pos = ui.item.data('start_pos');
                    var index = ui.placeholder.index();


                    cIndex = (start_pos < index) ? index-2 : index-1;
                    ui.placeholder.prevAll('li').each(function(){
                        $this = $(this);
                        if($this.is(ui.item)) {return;}
                        $this.html(cIndex);
                        cIndex--;
                    });

                    cIndex = (start_pos < index) ? index : index+1;
                    ui.placeholder.nextAll('li').each(function(){
                        $this = $(this);
                        if($this.is(ui.item)) return;
                        $this.html(cIndex)
                        cIndex++;
                    });

                    ui.item.html((start_pos < index) ? index-1 : index);
                },
                axis : 'y'
            });
        });

    Démo
    Voici le violon !

    Merci pour votre réponse

    OriginalL'auteur Robin Leboeuf