Select text in absolute element where parent is draggable table cell

Question

How can I select text on #text element?

SelTd is draggable and has onDragStart event.
#textparent is relative, #text is absolute
the goal - mouse selection of the text in #text and copy it

If I click mouse down and move on #text to copy it, JS trigger drag event on td element and prevents to select text.

Full code on codesandbox.

const SelTd = ({ children }: PropsWithChildren<any>) => {
    const ref = useRef(null)
    const onDragStart = useCallback((e: any) => {
        e.preventDefault()
        e.stopPropagation();
        ref.current && (ref.current.style.backgroundColor = 'yellow')
        setTimeout(() => {
            ref.current.style.backgroundColor = 'unset'
        }, 5 * 1000)
    }, [])
    return <td
        ref={ref}
        className="Td"
        draggable={true}
        onDragStart={onDragStart}

    >
        {children}
    </td>
}
export default function App() {
  return (
    <table>
      <tbody>
        <tr>
          <SelTd>
            <div className="Container">
              <div className="Abs" id="text">
                text to select
              </div>
            </div>
          </SelTd>
          <td className="Td">2</td>
        </tr>
      </tbody>
    </table>
  );
}

What does select text means ?. Do you want 'aaa' in your js or what exactly you want ? — Meet
– Meet, Commented Aug 8, 2024 at 3:37
mouse down, mouse move, mouse up on text = select. Focus text to CTRL+C. — tannerman
– tannerman, Commented Aug 8, 2024 at 3:48
Are you saying that the th is not to be draggable if the 'drag' starts within that absolutely-positioned element? — A Haworth
– A Haworth, Commented Aug 8, 2024 at 8:45

A Haworth · Accepted Answer · 2024-08-08 09:13:49Z

You need to set user-select in the text element.

Here's a minimal example with all the extraneous stuff stripped away:

<html lang="en">

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Test select
  </title>

  <style>
    .Td {
      padding: 10px 100px;
      border: 1px solid black;
    }
    
    .Container {
      position: relative;
    }
    
    .Abs {
      position: absolute;
      height: 33.5px;
      z-index: 9999;
      left: -100px;
      top: -10px;
      width: 300px;
      background-color: green;
      cursor: pointer;
      user-select: text;
    }
  </style>
</head>


<body>
  <table>
    <tbody>
      <tr>
        <td class="Td" draggable="true" ondragstart="event.preventDefault(); event.stopPropagation(); this.style.background='yellow'; var el= this; setTimeout(function() {el.style.background='unset';}, 5000);">
          <div class="Container">
            <div class="Abs" id="text">text to select
            </div>
          </div>
        </td>
        <td class="Td">2
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Collectives™ on Stack Overflow

Select text in absolute element where parent is draggable table cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related