list: slotted list-items that are not direct children of a list should be draggable

[DitwanP]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

list-item's slotted inside a div within a list do not get drag functionality when dragging is enabled`

Expected Behavior

list-item's within a list should be draggable if it's enabled, regardless of them being direct children or not.

Reproduction Sample

https://codepen.io/Ditwan-Price/pen/YzbaRQz?editors=1000

Reproduction Steps

1. Open codepen.
2. Notice how the first list is cannot be dragged even though drag handles are present.
3. Notice how the second list works as expected.
4. These lists should behave the same way.

Reproduction Version

2.10.0-next.6

Relevant Info

No response

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

No response

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[driskull]

There is a limitation with sortablejs, the library we are currently using for drag and drop, that requires the draggable elements of a parent to be direct children. Because of this, we can't support list-item's that aren't direct children of calcite-list.

I think we can close this issue and reevaluate if it becomes a problem.

[geospatialem]

Closing due to the limitation mentioned above.