Position de l'élément d'événement 'change' triable Jquery

Question

Existe-t-il un moyen de faire glisser la position actuelle de l’aide sur la nouvelle position?

 $("#sortable").sortable({
        start: function (event, ui) {
            var currPos1 = ui.item.index();
        },
        change:  function (event, ui) {
            var currPos2 = ui.item.index();
        }
});
 

Il semble que currPos1 et currPos2 ont la même valeur lorsque le changement se produit!

Ce que je dois réaliser est de mettre en surbrillance pour l'utilisateur toutes les positions entre «élément de glissement de début» et «élément remplacé». Une fois que l'utilisateur a relâché la mise à jour du bouton de la souris, c'est seulement à ce moment-là que j'ai une nouvelle position, mais j'en ai besoin avant la libération de la souris.

Answer 1

• démo: http://so.devilmaycode.it/jquery-sortable-change-event-element-position/

 $(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 + ')').addClass('highlights');
            } else {
                $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
            }
        },
        update: function(event, ui) {
            $('#sortable li').removeClass('highlights');
        }
    });
});
 

Answer 2

Cela fonctionne pour moi:

 start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
update: function (event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        //$('#sortable li').removeClass('highlights');
    }
 

Answer 3

Utilisez les événements update , stop et receive , vérifiez-le ici

Jquery Sortable Update Event peut être appelé une seule fois?

Answer 4

$( "#sortable" ).sortable({
    change: function(event, ui) {       
        var pos = ui.helper.index() < ui.placeholder.index() 
            ? { start: ui.helper.index(), end: ui.placeholder.index() }
            : { start: ui.placeholder.index(), end: ui.helper.index() }

        $(this)
            .children().removeClass( 'highlight' )
            .not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
    },
    stop: function(event, ui) {
        $(this).children().removeClass( 'highlight' );
    }
});

VIOLON

Un exemple de la façon dont il pourrait être fait à l'intérieur d'événement de changement sans stockage de données arbitraires dans l'élément de stockage. Puisque l'élément où glisser commence est - ui.helper, et l'élément de la situation actuelle en ui.placeholder, nous pouvons prendre les éléments entre ces deux indices et de les mettre en évidence. Aussi, on peut utiliser this à l'intérieur de gestionnaire, car il fait référence à l'élément que le widget est attaché. L'exemple fonctionne avec les glisser dans les deux sens.