Improve UX of drag and drop in List

[ashetland]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

The current version of drag and drop in List doesn't scale very well. Sorting a long list of items in a short container can be frustrating. In this example, the list of items being moved is longer than the height of the container:

Acceptance Criteria

• Drop zone indicator is changed to a 2px line that indents to show placement in hierarchy
• The parent layer is indicated with a 1px outline
• If an item with children is collapsed, it should open onHover after a short delay
• If possible, when picking up an expanded item, the clone could be collapsed to reduce its size (this may not work in practice)

Relevant Info

cc @driskull

Which Component

List

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[ashetland]

@driskull @geospatialem Marking this one as "ready". Matt and I have been in discussion about this one already. Final details may be adjusted as we work through it.

[driskull]

Im wondering if we might want to spike this and look into another library. We're kind of limited by the one we're currently using and it doesn't seem to be very actively maintained.

This library seems promising and seems to handle a lot of the issues you are seeing:

https://atlassian.design/components/pragmatic-drag-and-drop/examples https://atlassian.design/components/pragmatic-drag-and-drop/about

cc @jcfranco

Unfortunately, a lot of the other popular drag and drop libraries are tied to react so we can't use them. (dndkit).

[ashetland]

The Tree example seems to be almost exactly the behaviors we're looking for. In use, it feels like it would also solve the issues for #9262.

[driskull]

@jcfranco what are your thoughts?

[jcfranco]

Spiking sounds like a good idea to gauge effort and impact. Switching libs is something we could consider, given that SortableJS hasn't received updates in a while.

[driskull]

What I like about the pragmatic dnd approach is the keyboard support uses a menu on the drag target which makes more sense for moving between different lists and would solve that a11y issue.

[ashetland]

I also like that mouse users get that menu too if they only click.

[driskull]

Pragmatic drag and drop looks pretty promising, however it currently doesn't support web components. There is an associated issue https://github.com/atlassian/pragmatic-drag-and-drop/issues/15

I'm not sure we can do a move to another library at this time unless we can find anther active dnd library that doesn't require a framework and supports web component use cases.

@geospatialem should we unspike this? I think maybe we should just move this to the backlog for now. @jcfranco

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[geospatialem]

Pragmatic drag and drop looks pretty promising, however it currently doesn't support web components. There is an associated issue atlassian/pragmatic-drag-and-drop#15

Thanks for the in-depth research, @driskull! Going to mark this as blocked by the Atlassian issue above.

[driskull]

@jcfranco we could move that issue along by recreating the board example code from React to using vanilla web components.

I could make this a priority if we want to. It could also be a good task for someone familiar with React.

This would help speed the issue along from https://github.com/atlassian/pragmatic-drag-and-drop/issues/15#issuecomment-2041640153

I suspect most of the code changes necessary for them to support web components are moving away from document.elementFromPoint()/element.closest() to using event.composedPath() or using getRootNode().