JQuery UI sort position position on change event

Question

In JqueryUI sortable, When a user drags an item, the event raised is raised. I got it below.

jsFiddle code here

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 position console.log("New position: " + ui.item.index()); } 

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

I just saw the answer here: jQuery UI Sortable Position

In the above link, the position value ( ui.item.index () ) is available in the Stop function , when dragging an element I want its position ( in the change function )? Any ideas?

I need this because when the user tries to place item7 after item2, I will do some checking by getting the values ​​from the previous Item2 (If I know the current position of the drag item, then only I can access the previous item) . If the test was successful, it can be placed or I need to show some message.

Answer 1

If you want to get the index of the current hang, try using placeholder .

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

Fiddle

Answer 2

Judah Duran’s answer will not work all the time (it turned out that after my hair was pulled out). The first and last position of the placeholder move based on the location of the mouse.

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

will work more efficiently since it first deletes the actual item and leaves the placeholder. Note that I have a “ghost” as a placeholder parameter.