List: Drag and Drop does not work when clicked upon item-text

[ta834n]

Bug Description

Hi folks,
I would really like to use the Drag and Drop-feature provided by your List-component.
Unfortunately, Drag and Drop does work when the mousedown-event happens to be located on text or any direct child of the ListItemStandard.

You can try this yourself using your own example here: https://sap.github.io/ui5-webcomponents/components/List/#drag-and-drop
Simply click on the text "Item #1" and try to drag that item. Nothing will happen.

If you adjust the code as follows, the item won't be movable at all (except when you manage to hit the thin border of the blue selection-box):

<ui5-li icon="checklist-item" movable><div>Item #1</div></ui5-li>

Affected Component

List, ListItemStandard, ListItemCustom

Expected Behaviour

I expect a ListItemStandard and a ListItemCustom to be draggable as long as the mousedown-event happens within the bounding-box of such an item.

Isolated Example

https://sap.github.io/ui5-webcomponents/components/List/#drag-and-drop

Steps to Reproduce

1. go to https://sap.github.io/ui5-webcomponents/components/List/#drag-and-drop
2. press on the text of the first item in the list and try to drag that item somewhere else in that list
3. the item cannot be moved

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.9.0

Browser

Chrome

Operating System

Mac OS

Additional Context

No response

Organization

Neckar IT GmbH

Declaration

• I’m not disclosing any internal or sensitive information.

[plamenivanov91]

Hello @SAP/ui5-webcomponents-topic-p ,

The reporter wants to be able to drag/drop items in the List when starting to drag from a text node in an item.

Currently this is not possible.

Could you please look into this issue ? It might be needed to forward this issue to the central D&D owner.

Regards,
Plamen Ivanov

[dimovpetar]

Adding my 2 cents:
This is Chromium bug, which doesn't allow dragging custom elements by a slotted element.
The issue is reported here https://issues.chromium.org/issues/328263459.
Possible workaround is to use Firefox.

[PetyaMarkovaBogdanova]

Hi @ta834n ,
as my colleague suggested above, this issue seems to be Chromium issue with Drag & Drop functionality, when using it upon a slot. We can both assign to watch if any progress is marked on their side and see how it will affect the UI5 List item issue.
Best regards,
Petya Markova
UI5 Web Components Developer

[github-actions]

This issue has been closed. To reopen, just leave a comment!