2

I find that when a div containing text is draggable I can't select the text.

If I remove the DnD stuff then I can select the text.

Is there a way of having both?

Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
  • Can you share the code what you have tried? – Hemadri Dasari Sep 26 '18 at 14:09
  • 1
    The UX design seems challenging. How to determine which the user wants? If they click and drag on the text, how would you know whether they want to drag-and-drop or select? You could resolve that with a state toggle somewhere, per-item or global. When toggled drag-off select-on, (let's call this "off" state), then they could select. When toggled drag-on select-off (let's call this "on" state), then they could drag. You could leverage React to enable DnD behavior only in the latter case. Another option is some other gesture recognition like long-click/tap, which react-dnd may not support. – Will Sep 26 '18 at 14:12
  • @WillCain Could do select text on double click. Or don't make the text a point that triggers dragging, although I suppose that could be awkward. – Ian Warburton Sep 26 '18 at 14:17
  • Sure, those both seem reasonable; I suspect react-dnd doesn't support (well?) but dunno – Will Sep 26 '18 at 14:57

1 Answers1

2

A key wrinkle in the question seems to be which precise UX design to support.

A state toggle is one way to resolve that issue. Place a checkbox or other toggle control somewhere, either per-item or global. When toggled with drag off and select on, (let's call this the "off" state), then user could select. When toggled drag on and select off (let's call this the "on" state), then user could drag. You could leverage React to enable DnD behavior only in the latter case of "on" state (like even literally don't include the drag-and-drop wrappers when "off").

Another option is some other gesture recognition like long-click/tap, which react-dnd may not support. You've mentioned some other possibilities like double-click and making the text itself not draggable.

Will
  • 6,601
  • 3
  • 31
  • 42
  • aha... I have a textarea in a draggable and the text within it is selectable. It's still not perfectly usable but it's close. – Ian Warburton Sep 26 '18 at 19:54