63

Is there way to get current position of helper being dragged on over 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 same value when actual change happens !

What I need to achieve is highlight to user all positions between 'start drag element' to 'currently replaced element'. Once user releases mouse button update happens and only then I get new position, but I need it before mouse release.

dzolnjan
  • 1,243
  • 4
  • 14
  • 26

5 Answers5

104

UPDATED: 26/08/2016 to use the latest jquery and jquery ui version plus bootstrap to style it.

$(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');
        }
    });
});
Community
  • 1
  • 1
Luca Filosofi
  • 30,905
  • 9
  • 70
  • 77
  • I saw that question. It works with 'update' event but I need current position in 'change' event! – dzolnjan Feb 10 '11 at 11:47
  • var index = ui.placeholder.index() is what I was looking for, thanks – dzolnjan Feb 10 '11 at 14:29
  • I had an issue with this code, In your example, if you moves an element to get some elements highlighted, and then return it to it's original position, the highlights still stands, even you drop it. – AlvaroAV Apr 08 '15 at 09:05
  • I changed the last function from **update** to **stop**, so even the final position is the original it will remove the highlights – AlvaroAV Apr 08 '15 at 09:07
  • I'm using code like this but i have problem with dynamically added element, they can't trigger events and I confused how could I do that? – QMaster Aug 25 '16 at 23:07
  • @QMaster: i have updated my demo to use the latest jquery and jquery ui version plus bootstrap to style it. if you are using an older version check this http://stackoverflow.com/questions/7660606/jquery-ui-draggable-and-dynamic-jquery-ui-draggable – Luca Filosofi Aug 26 '16 at 15:23
  • @LucaFilosofi Thanks, but I'm using new version of jQuery and about bootstrap I didn't use it because of using my own styles, I found my problem, I need to repeat above jQuery function after adding new dynamic element to sortable, Thanks again. – QMaster Aug 26 '16 at 21:43
19

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');
    }
Gluip
  • 2,917
  • 4
  • 37
  • 46
4

Use update, stop and receive events, check it over here

Jquery Sortable Update Event can called only one time?

Community
  • 1
  • 1
Safran Ali
  • 4,477
  • 9
  • 40
  • 57
3

If anyone is interested in a sortable list with a changing index per listitem (1st, 2nd, 3th 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 can 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>
Mattijs
  • 3,265
  • 3
  • 38
  • 35
0
$( "#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 it could be done inside change event without storing arbitrary data into element storage. Since the element where drag starts is ui.helper, and the element of current position is ui.placeholder, we can take the elements between those two indexes and highlight them. Also, we can use this inside handler since it refers to the element that the widget is attached. The example works with dragging in both directions.

Danijel
  • 12,408
  • 5
  • 38
  • 54