Posizione dell’elemento evento ‘cambia’ di Jquery ordinabile

C’è un modo per ottenere la posizione attuale di helper trascinato su una nuova posizione?

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

Sembra che currPos1 e currPos2 abbiano lo stesso valore quando avviene il cambiamento effettivo!

Quello che devo raggiungere è evidenziare all’utente tutte le posizioni tra “inizio trascina elemento” in “elemento attualmente sostituito”. Una volta che l’utente rilascia l’aggiornamento del pulsante del mouse, succede e solo allora ottengo una nuova posizione, ma ne ho bisogno prima del rilascio del mouse.

AGGIORNATO: 26/08/2016 per utilizzare l’ultima versione di jquery e jquery ui più bootstrap per adattarlo.

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

Questo funziona per me:

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

Usa update , stop e receive eventi, controlla qui

L’evento di aggiornamento ordinabile Jquery può essere chiamato una sola volta?

Se qualcuno è interessato a una lista ordinabile con un indice mutevole per listino (1 °, 2 °, 3 ° ecc …:

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

Il tuo markup può assomigliare a questo:

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

VIOLINO

Un esempio di come potrebbe essere fatto all'interno dell'evento change senza memorizzare dati arbitrari nella memoria degli elementi. Poiché l'elemento in cui inizia il trascinamento è ui.helper e l'elemento della posizione corrente è ui.placeholder , possiamo prendere gli elementi tra questi due indici e evidenziarli. Inoltre, possiamo usare this gestore interno poiché si riferisce all'elemento a cui è collegato il widget. L'esempio funziona con il trascinamento in entrambe le direzioni.