Skip to content

List View: Make drag chip resemble list item, and displace blocks when dragging #56539

@andrewserong

Description

@andrewserong

What problem does this address?

Part of #49563

Dragging list view items does not feel like picking up a list view item and moving it to a new position.

When dragging blocks within the list view, the drag chip (the icon that follows the mouse cursor around) obscures the drop indicator line, while also not being a WYSIWYG representation of dragging blocks around. Also, there has been feedback on issues and PRs that the drop indicator line can make it feel difficult to drag blocks around in an intuitive way.

What is your proposed solution?

A suggestion that's come up many times is to try displacing list items while dragging, that is to say, when a user drags a block, move all the other list items out of the way. This has been tried previously in #34022. It would be good to explore this idea again, especially now that a number of improvements have landed for the list view. One potential path forward could involve:

Potential way to implement it

This is one potential path, that (hopefully) wouldn't involve a large refactor, but that could provide the visual appearance of dragging "real" list view items while moving the other list view items out of the way as a user drags blocks around:

  • When a user starts dragging a block, "hide" the blocks within the list view, and use a duplicate of the DOM elements for those blocks as the drag chip (effectively part of what was being explored in List View: Update draggable chip to resemble the list view item when dragged #49820)
  • Then, for each list view item, animate the item to move either up or down, based on whether or not the item is above or below the mouse cursor. The distance the item is to move up or down should be the height of the dragged items

With these two ideas combined, we might be able to get something that feels like a WYSIWYG experience of dragging blocks in the list view.

To-do

Metadata

Metadata

Assignees

Labels

[Feature] List ViewMenu item in the top toolbar to select blocks from a list of links.[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions