JQuery sorting "item" event position

Question

Is there any way to return the current assistant position to a new position?

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

It seems that currPos1 and currPos2 have the same meaning when real changes happen!

What I need to achieve is to give the user all the positions between the "start drag element" and the "replaceable element". As soon as the user releases the mouse button update, and only then will I get a new position, but I need this before the mouse leaves.

Answer 1

UPDATED: 08/26/2016 ^{to use the latest version of jquery and jquery ui plus bootstrap for its style.}

• demo: 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

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

Answer 3

Use update , stop and receive events, check it here

JQuery Sortable Update Event can be raised only once?

Answer 4

If someone is interested in a sorted list with a changing index for the list (1st, 2nd, 3rd, 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; } 

Your markup might look like this:

 <ul class="sortable "> <li > <div> <span class="ordinal-position">1st</span> A header </div> <div> <span class="icon-button handle"><i class="fa fa-arrows"></i></span> </div> <div class="bpdy" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </div> </li> <li > <div> <span class="ordinal-position">2nd</span> A header </div> <div> <span class="icon-button handle"><i class="fa fa-arrows"></i></span> </div> <div class="bpdy" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </div> </li> etc.... </ul> 

Answer 5

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

Fiddle

An example of how this can be done inside the change event without storing arbitrary data in the element store. Since the element where the drag starts begins is ui.helper , and the element of the current position is ui.placeholder , we can take the elements between these two indices and select them. In addition, we can use the this handler because it refers to the element that the widget is attached to. The example works with drag and drop in both directions.