可拖拽元素内文本复制与拖拽行为冲突的解决方法咨询

看起来你遇到了一个挺常见的交互冲突——当元素设置了draggable={true}后，想选中文本复制的时候很容易触发拖拽，确实挺烦人的。我给你几个实用的解决思路，你可以根据自己的场景选择：

• 方法一：通过鼠标移动距离区分拖拽和选文本操作
  我们可以监听鼠标的按下、移动事件，判断用户的操作意图：只有当鼠标按下后移动了一定距离（比如5px），才判定为拖拽行为；如果只是点击或短距离移动，就允许选中文本。示例代码如下：

  import { useState } from 'react';
  
  function DraggableWithCopy() {
    const [isDragging, setIsDragging] = useState(false);
    let startX, startY;
  
    const handleMouseDown = (e) => {
      startX = e.clientX;
      startY = e.clientY;
      setIsDragging(false);
    };
  
    const handleMouseMove = (e) => {
      if (!startX || !startY) return;
      const diffX = Math.abs(e.clientX - startX);
      const diffY = Math.abs(e.clientY - startY);
      // 当移动距离超过5px时，判定为拖拽
      if (diffX > 5 || diffY > 5) {
        setIsDragging(true);
      }
    };
  
    const handleDragStart = (e) => {
      if (!isDragging) {
        e.preventDefault(); // 阻止拖拽行为
      }
    };
  
    return (
      <div 
        style={{width:"200px",height:"100px", border: '1px solid #ccc'}} 
        draggable={true}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onDragStart={handleDragStart}
      >
        <div style={{width:"100px",height:"50px"}}> copy test</div>
      </div>
    );
  }
  

• 方法二：给文本容器单独设置禁止拖拽
  这是最简单的方法：把内部的文本容器设置为draggable={false}，这样当鼠标点击文本区域时，不会触发父元素的拖拽行为，自然就能正常选中文本复制了。修改后的代码如下：

  <div style={{width:"200px",height:"100px"}} draggable={true}>
    <div style={{width:"100px",height:"50px"}} draggable={false}> copy test</div>
  </div>
  

  不过要注意，这个方法会让文本区域失去触发父元素拖拽的能力，适合只需要在非文本区域触发拖拽的场景。

• 方法三：监听文本选择事件，动态禁用/恢复拖拽
  我们可以监听文本的selectstart和selectend事件，当用户开始选中文本时，暂时禁用父元素的拖拽；选完文本后，再恢复拖拽功能。示例代码：

  import { useRef } from 'react';
  
  function DraggableWithCopy() {
    const dragRef = useRef(null);
  
    const handleSelectStart = () => {
      if (dragRef.current) {
        dragRef.current.draggable = false;
      }
    };
  
    const handleSelectEnd = () => {
      if (dragRef.current) {
        dragRef.current.draggable = true;
      }
    };
  
    return (
      <div 
        ref={dragRef}
        style={{width:"200px",height:"100px", border: '1px solid #ccc'}} 
        draggable={true}
      >
        <div 
          style={{width:"100px",height:"50px"}}
          onSelectStart={handleSelectStart}
          onSelectEnd={handleSelectEnd}
        > copy test</div>
      </div>
    );
  }
  

备注：内容来源于stack exchange，提问作者whitebear