Making an element draggable prevents user from highlighting and copying text content inside the element

[vietanhtran16]

Replicate of the issue: It is happening on this example in the documentation too

We have something similar (also using a dragHandle too) on our side where each draggable element has text content inside it and it would be common for our user to copy text content from those element as it is kinda a note taking app. It seems like when user tries to highlight a text as it is a draggable, user can't highlight anymore.

How could we fix this? Thanks

[alexreardon]

I'll take a look

[vietanhtran16]

Thank you @alexreardon 👍

[vietanhtran16]

@alexreardon Is there a workaround that we can do for the moment to fix this issue on our side? Have you any luck with this?

[alexreardon]

Unfortunately it looks like browsers do not work well with text selection side of draggable="true" elements.

For the purpose of enabling text selection inside of a draggable area:

• if you want the whole element to be "draggable", then you won't be able to have text selection
• if you are happy to have a drag handle, just make the drag handle the "draggable", and don't use the "dragHandle" property on our draggable()
• you will then need to make sure you use setCustomNativeDragPreview to render the preview how you want it to look (and you can make it look like the bigger element that the drag handle is on)

I am updating our list example to follow this pattern