Vue.draggable: FutureIndex Inaccurate when used with flex layout

[vmitchell85]

Issue Summary

When dragging an item from one vuedraggable element to another the FutureIndex provided via the onMove callback is inaccurate when the element is dragged in between two existing elements.

Screen recording: https://youtu.be/6w1xzhfjq-c

Fiddle: https://jsfiddle.net/vmitchell85/d04oesxh/

Fiddle Instructions
If you drag "New 1" over on top of "Existing 2" you'll see "New 1" shift to go between the two Existing ones. You'll notice the futureIndex value show incorrectly as 2.

Also see #63

[David-Desmaisons]

@vmitchell85 I am investigating this one, the problem is linked with the flex layout. I may come with a solution but it may took some time.

[vmitchell85]

@David-Desmaisons Thanks for looking into it. I do not think the issue is linked with flex layout. My actual implementation is using Bootstrap 3 which doesn't use flex.

I also created the fiddle without the flex layout but it was harder to drag the new item in between the other two so I tried to make it easier.

[David-Desmaisons]

@vmitchell85 , I created a PR for Sortable.js: https://github.com/RubaXa/Sortable/pull/1084 that will allow to manage correctly the future index in vuedraggable.
Mainwhile, I think I can provide a fix in vuedraggable.

[David-Desmaisons]

@vmitchell85 , I was unable to provide a fix with current version of Sirtable. Let's way for feedabck on the PR.

[amorriscode]

@vmitchell85 Did you ever get your map issues resolved? I can't seem to figure those out and I'm not sure if it's entirely related.

[vmitchell85]

@amorriscode I think the map errors only occur when I try to log something to the console. I'm not sure why, but they don't happen when I remove all debug statements.

[amorriscode]

@vmitchell85 I actually resolved this by initiating my empty lists with an empty array.

[officert]

I'm running into this issue as well. I have one instance of draggable that works fine, but another where this issue pops up. Not sure what the difference is yet. I tried to initialize the list with an empty array, instead of null, but so far can't get that to fix it either. I'll post back if I can figure out what's different between my 2 instances.

[David-Desmaisons]

Version v2.1.2.0 contains fix for this issue.

[vmitchell85]

Awesome... I'll give it a go!

[vmitchell85]

It looks like this fixed the original issue but the index is still wrong if you drag it to be the last item.

New Fiddle: https://jsfiddle.net/qvy6tgng/

I am so very thankful for all the work you've been putting into this... I really appreciate it!

[David-Desmaisons]

Hello @vmitchell85 , The fix should be tested with version 1.6.0 of Sortbale, please try this fiddle:
https://jsfiddle.net/dede89/qvy6tgng/2/

[vmitchell85]

The issue still exists in your fiddle

[David-Desmaisons]

Hello @vmitchell85 , I play around with the new fidle and everything seems fine.
Could you give me the scanario which result in the problem?

[vmitchell85]

Here is what I'm seeing: https://youtu.be/_jfu_79b33U

The value should be 2, not 0.

[Sualty]

hi, it seems that I have a similar problem, it seems that sometimes futureIndex doesn't give the good index.
Here is my onMove method :

Sometimes, the console prints that the index of the related element is different than the futureIndex...

[SirHodlington]

This is still a big issue