Jquery UI sortable item position on change event

Question

In JqueryUI sortable, When the user drags a item, change event called. I got this on below example.

stop: function(event, ui) {
        console.log("New position: " + ui.item.index());
    },
    change: function(event, ui) {
        // When the item postion is changed while dragging a item, I want it's position
        console.log("New position: " + ui.item.index());
    }

In my code When the user drags a item (Item7) and changes the position , while dragging a item and changing the position . I want to get the position of a dragging item.

I just saw a answer here : jQuery UI Sortable Position

In the above link, position value (ui.item.index()) is accessed on Stop function, while dragging a item, I want it's position (on change function) ? Any Idea ?

I need this because when the user tries to place a item7 after a item2, I will do some validation getting values from previous Item2 (If I know the current position of the dragging item, Then only I can access previous item) . If the validation is success, It can be placed or I have to show some message.

This question & answer here seem to be of high use to you.

Ohgodwhy
– Ohgodwhy

2013-06-18 05:02:12 +00:00
Commented Jun 18, 2013 at 5:02 — Ohgodwhy
– Ohgodwhy, Commented Jun 18, 2013 at 5:02

Jude Duran · Accepted Answer · 2013-06-18 06:05:17Z

8

If you want to get the index of what's currently hovered, try using placeholder.

change: function(event, ui) {
      console.log("New position: " + ui.placeholder.index());
}

FIDDLE

answered Jun 18, 2013 at 6:05

Jude Duran

2,2152 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Snowden · Accepted Answer · 2014-07-16 05:32:13Z

0

Jude Duran's answer will not work constantly (found this out after taring my hair out). The first and last items placeholder move depending on the mouse location.

function getPaceholderIndex( ui ) {
    var clone = $(myMenu).clone();
    $('.ui-sortable-helper', clone).remove();
    return $('.ghost', clone).index();
}

will work more efficiently as it firstly removes the actual item and leaves the placeholder. Note that I have 'ghost' set as the placeholder parameter.

answered Jul 16, 2014 at 5:32

Luke Snowden

4,2362 gold badges41 silver badges73 bronze badges

Collectives™ on Stack Overflow

Jquery UI sortable item position on change event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related