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](http://stackoverflow.com/questions/8148145/drag-event-for-jquery-ui-sortable) seem to be of high use to you. — Ohgodwhy, Jun 18 '13 at 05:02

score 8 · Accepted Answer · answered Jun 18 '13 at 06:05

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 '13 at 06:05

Jude Duran

2,195
2
25
41

score 0 · Answer 2 · answered Jul 16 '14 at 05:32

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.

Jquery UI sortable item position on change event

2 Answers2