atlassian/pragmatic-drag-and-drop

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

Closed this issue · 4 comments

vietanhtran16 commented

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 commented

I'll take a look

vietanhtran16 commented

Thank you @alexreardon 👍

vietanhtran16 commented

@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 commented

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