in action
https://youtu.be/vQUnOpwV9xU

note that the red square icon is a placeholder, new breeze icons are needed for that

Possible handles (to resume that old discussion)

How about the version like that, but with fewer dots? I thought those looked really, really good.

In D12960#264657, @rkflx wrote:

I think with this image we are trying to convey too much. Users in general, will understand that if you have a consistent imagery to represent drag, they will come to recognize it and use it however the system allows them to use it. Because of that, the arrows are extra. Not necessary. Because the system will determine the drag direction and the user will understand how to use them. Instead, we have to focus on the center image first and convey drag that way. Plus, on mobile for example, this is generally not used. People don't use arrows to represent drag direction. Instead, they just try to represent drag. I think we can use that idea.

We agree that dots are used to represent touch or "draggable" control

Another thought is that we also want to be a bit different, maybe not too different, than what other platforms do. We have tried a few ideas on this. What about these ones:

Regardless of what icon we choose, for a drag handle, I think it has to be a very light gray. We previously had a 4x3 dot grid, but because it was black, it looked very heavy and when a bunch of them were all lined up vertically, the net effect was sort of weird.

Personally, My favorite was a small number of dots with Henrik's idea:

Especially the two right-most ones. If rendered in light gray, I think those could look great.

In D12960#264732, @alex-l wrote:

I really like the vertical drag icon here! Not so sure about the horizontal swipe icon though.

In D12960#264734, @ngraham wrote:

Regardless of what icon we choose, for a drag handle, I think it has to be a very light gray. We previously had a 4x3 dot grid, but because it was black, it looked very heavy and when a bunch of them were all lined up vertically, the net effect was sort of weird.

+1

In D12960#264732, @alex-l wrote:

I think the mouse cursor should be:

• drag-open-hand for first one
• clickable-finger (like for links) for second and third ones

In D12960#264737, @alex-l wrote:

In D12960#264732, @alex-l wrote:

I think the mouse cursor should be:

• drag-open-hand for first one
• clickable-finger (like for links) for second and third ones

to me all 3 are quite good!

the first if we drop the directionality can become just a 9 dots matrix?

IMHO the up-and-down arrows do a much better job of communicating "drag me!" than a 9 dot grid does.

In D12960#264749, @ngraham wrote:

IMHO the up-and-down arrows do a much better job of communicating "drag me!" than a 9 dot grid does.

good point, so so far my favourite are the options by alex

Cursors and hover:

Edit: added touch input for draggable entry:

I tried with arrows too, but I think the fifth one looks better... my second choice is the third one.

Possible interactions on hover (I used the third one and the fourth one when dragging):

Edit: I forgot the color change on hover

In D12960#265012, @alex-l wrote:

I tried with arrows too, but I think the fifth one looks better... my second choice is the third one.

i like the 5th more as well, tough the 2nd may be better if there will be the just horizontal or just vertical one, so all would have the same style