FutureIndex inaccurate (always 0) on first interaction

[terrymun]

When dragging and dropping in <draggable>, it appears that the first time the list is being interacted with always reports the futureIndex as being 0:

Proof-of-concept demo of the problem

https://jsfiddle.net/teddyrised/64753ck1/

Description of the issue

1. Try to drag any items in the list to a new position
2. Note that the e.draggableContext.futureIndex is always 0 regardless of the future position
3. Drop the element in a new position. Note that the onEnd() event reports the correct old and new indeces
4. Try to drag the same element again to another position. This time, the futureIndex is reported correctly

Expected behavior

On the first drag interaction, the futureIndex should report an accurate expected/future index instead of 0.

[David-Desmaisons]

Hello,
This information is in fact relevant? it indicates that the drag has starts and is the user releases the drag the element will return to its current position.

[terrymun]

@David-Desmaisons I think when you release the drag the element will be inserted to wherever Sortable thinks it should belong: definitely not back to position 0. Note that the behavior is correct for all subsequent drag and drop interaction, just not the first time.

Try dragging the first item to the end of the list. It indicates that the futureIndex is 0. You release the cursor. The item gets injected to an index of 4.

When you repeat that action again (dragging first item to original position), and then trying to drag it to the end of the list, now futureIndex correctly reports 4.

[David-Desmaisons]

I can not reproduce using the fidlle you provided:

[terrymun]

@David-Desmaisons If you look at your fiddle screen recording, you've already sorted the list before (since "Dolor" is not the default first item in the original order). As I have mentioned, this is only reproducible on the first interaction with the list: since you have interacted with the list prior to the recording, the bug cannot be reproduced.

If you refresh the page (or rerun the fiddle), and start dragging the first item ("Lorem"), you will be able to reproduce the problem.

Looking into the actual code itself, it seems like the error might be coming from this line: https://github.com/SortableJS/Vue.Draggable/blob/master/src/vuedraggable.js#L426

if (!relatedContext.element) {
  return 0;
}

I have a feeling that relatedContext.element is undefined or null upon the first interaction, which causes futureIndex to always be 0. This issue goes away after the first interaction probably because then relatedContext.element now pointed to an actual DOM node.

[David-Desmaisons]

@terrymun understood I am able to reproduce now.
Thanks for the hints, I will investigate later on.

[David-Desmaisons]

Updated fiddle for reproduction:
https://jsfiddle.net/dede89/gjzr6pta/

Still reproductible with version 2.21.0 and sortable 1.19.0

[David-Desmaisons]

Corrected in version 2.23.0

[terrymun]

@David-Desmaisons Thanks for looking into the issue and fixing it 💯

[madebycaliper]

hey @David-Desmaisons I'm confused as to why this was closed last year. I'm still experiencing this issue using v2.24.3. Is there some new syntax I need to adhere to take advantage of the fix? I also saw #419 and was wondering if my setup is related to that issue and/or if that's been effectively resolved. Thanks 🙏

[andrey0890]

I have the same problem, the futureIndex is always 0. I am using Vuedragable v2.24.3 and SortableJS v1.10.2

[sam-19]

In case someone is having trouble with this, I managed to circumvent it with this hack:

if (this.draggableListItems.length > 1)
    this.$refs['draggable-list-component'].updatePosition(0, 1);
    this.$refs['draggable-list-component'].updatePosition(1, 0);
}

Obviously, it should be called after the list has been initialized but before the user has a chance to interact with the list, e.g. in the mounted-hook.
Note that simply calling updatePosition(0, 0) didn't do the trick for me, I actually had to shuffle an item back and forth.

[kevinXmichael]

Hey @sam-19, does this really fix your problem? I can still reproduce this bug in my Vue project using vuedraggable v2.24.3.

I am trying really hard updating nested-vuex-data after the view is mounted to avoid the "first-interaction-bug", but it still appears.

Can't just anyone merge the current Sortable.js version into VueDraggable? The bug should have been fixed there, why not in the Vue version?

[hovsepian]

I am change my v-for loop structure and now worked successfully

[kevinXmichael]

@hovsepian your solution actually worked for me, man thank you!! :-)

[milenarmp]

Odd behaviour. Mine is still doing this even tho I already wrapped my child component in a div with v-for and unique keys.

@sam_19 your solution actually helped me. =) solved my problem.

[kevinXmichael]

@milenarmp which version of the library and of Vue do you use?

[medval]

Hello,

I'm sorry to re-open this discussion, but the problem is still there for me.
vuedraggable 2.24.3
vue: ^2.6.12

The template (regionStopList is a cloneDeep of region.regionStopList) :
`
<vue-draggable group="tour-predefined-region-sup"
:list="regionStopList"
@change="regionStopOrderChange"

<region-stop-component
v-if="regionStopCollapse"
v-for="regionStop in region.regionStopList"
:key="regionStop.id"
:region-stop="regionStop"

`

Any help would be welcome :)
(the previous tips do not work)

[Killea]

@sam-19 thanks. The workaround worked very well!