Tab dragging should show where the tab will be inserted, not which tab it will be "replacing"

[Tyriar]

#7854

• VSCode Version: Code - Insiders 1.3.0-insider (798b41a, 2016-06-29T05:14:50.570Z)
• OS Version: Linux x64 4.4.0-24-generic, Ubuntu 16.04

Currently:

It would be more intuitive for a "to be inserted here" vertical line to show up to the left of code.spec.template.

Dynamic rearranging like in Chrome would be an even nicer visual indicator.

[yisibl]

I think if the tabs support animation it does not need this placeholder.

[stevencl]

As @Tyriar suggests, previewing where the tab will be placed seems like a good approach. Edge does it too, seems like a reasonably common pattern. Visual Studio does something similar, although not as smooth - the tab jumps into place as you drag with the mouse down.

I would recommend we do what the browsers do.

[bgashler1]

+1 for the browser behavior and dynamic rearranging if possible.

[bgashler1]

We agreed in UX sync today that it would be good to get feedback on two different approaches:

1. dynamic reordering with animated tabs moving to make room (browser style)
2. using a vertical bar to indicate the exact position a tab will be inserted.

[kylevdr]

+1, the current behavior is pretty unintuitive. Of the two options @bgashler1 presented, it seems like option 1 is the way Sublime Text does it and option 2 is the way Atom does it. In my opinion, I would prefer option 1 but either one would be a big improvement.

[joachim-n]

The current behaviour is ambiguous and confusing: when you drag a tab and hover over another tab with it, you can't tell whether dropping the tab will put it to the left or the right of the tab.

(Sorry for the duplicate!)

(Is there a related issue for the dragging behaviour Open Editors list, which has the same problem?)

[joachim-n]

I wouldn't say this is crucial, but just about every other UI shows the insertion point when tabs or list items are dragged. This makes VSCode look pretty bad.