Position de l’élément d’événement ‘change’ sortingable Jquery

Y a-t-il moyen de faire passer la position actuelle de l’assistant par rapport à 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 aient la même valeur lorsque des changements réels se produisent!

Ce que je dois faire, c’est mettre en surbrillance l’utilisateur de toutes les positions entre l’élément de début de déplacement et l’élément actuellement remplacé. Une fois que l’utilisateur a relâché le bouton de la souris, la mise à jour se produit et alors seulement, j’obtiens une nouvelle position, mais j’en ai besoin avant la sortie de la souris.

    MISE À JOUR: 26/08/2016 pour utiliser la dernière version de l’interface utilisateur jquery et jquery plus bootstrap pour le styler.

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

    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'); } 

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

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

    Si quelqu’un est intéressé par une liste sortingable avec un index changeant par listitem (1er, 2ème, 3ème etc …:

    http://jsfiddle.net/aph0c1rL/1/

     $(".sortable").sortable( { handle: '.handle' , placeholder: 'sort-placeholder' , forcePlaceholderSize: true , start: function( e, ui ) { ui.item.data( 'start-pos', ui.item.index()+1 ); } , change: function( e, ui ) { var seq , startPos = ui.item.data( 'start-pos' ) , $index , correction ; // if startPos < placeholder pos, we go from top to bottom // else startPos > placeholder pos, we go from bottom to top and we need to correct the index with +1 // correction = startPos <= ui.placeholder.index() ? 0 : 1; ui.item.parent().find( 'li.prize').each( function( idx, el ) { var $this = $( el ) , $index = $this.index() ; // correction 0 means moving top to bottom, correction 1 means bottom to top // if ( ( $index+1 >= startPos && correction === 0) || ($index+1 <= startPos && correction === 1 ) ) { $index = $index + correction; $this.find( '.ordinal-position').text( $index + ordinalSuffix( $index ) ); } }); // handle dragged item separatelly seq = ui.item.parent().find( 'li.sort-placeholder').index() + correction; ui.item.find( '.ordinal-position' ).text( seq + ordinalSuffix( seq ) ); } ); // this function adds the correct ordinal suffix to the provide number function ordinalSuffix( number ) { var suffix = ''; if ( number / 10 % 10 === 1 ) { suffix = "th"; } else if ( number > 0 ) { switch( number % 10 ) { case 1: suffix = "st"; break; case 2: suffix = "nd"; break; case 3: suffix = "rd"; break; default: suffix = "th"; break; } } return suffix; } 

    Votre balisage peut ressembler à ceci:

     
    • 1st A header
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    • 2nd A header
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    • etc....
     $( "#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 cela pourrait être fait à l'intérieur d'un événement de modification sans stocker de données arbitraires dans le stockage d'éléments. Puisque l'élément où la traînée commence est ui.helper et que l'élément de la position actuelle est ui.placeholder , nous pouvons prendre les éléments entre ces deux index et les mettre en évidence. Nous pouvons également utiliser this gestionnaire interne car il fait référence à l'élément auquel le widget est attaché. L'exemple fonctionne en faisant glisser dans les deux directions.