【疑难杂症】去除浏览器拖拽选中内容产生的地图效果

1. 介绍

1. 事情经络：当选中一片内容的时候，然后拖拽这个内容，会发现有这内容的影子被拖着跟着鼠标移动，这其实是浏览器自带的特效功能，可以把你选中的内容快捷拖入文档中…但是呢在一些特殊的内置浏览器中，这个效果被弄出了白屏拖拽情况。本文译在解决这个问题bug。
2. 功能介绍：
   （1） 不影响其他正常的选中效果和拖拽效果。
   （2）模拟手机端按下、移动、抬起指拇功能，然后在移动的时候禁止触发浏览器默认事件（禁止默认事件则代表着禁止掉拖拽地图bug）
   （3）在最父级节点做事件监听 鼠标按下、鼠标移动、鼠标抬起 功能，然后做处理。

2. 代码（本文以 react 举例，如果是vue则把监听事件更改为 @mouseDown… 逻辑一样）

const pageIndex = () => {
// ----------------------------去除浏览器自带拖拽地图功能---------------------
  /**
   * 模仿实现手机端的 按下、移动、抬起指拇功能
   */
  let dragFlag = false;
  let downFlag = false;
  // 移动的时候禁止触发浏览器默认事件
  let disabledMove = false;

  const handleMove = () => {
    const str = window.getSelection() || '';
    disabledMove = !!(str?.toString() && str?.toString()?.length > 0)
  }
  const mouseDown = () => {
    downFlag = true;
    handleMove()
  }
  const mouseUp = (e: any) => {
    downFlag = false;
    handleMove();
  }
  let timer: any = null;
  const mouseMove = (e: any) => {
    if (!downFlag) return;
    if (!dragFlag) dragFlag = true;
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      dragFlag = false;
    }, 10)
    if (disabledMove) e.preventDefault()
  }
  // ----------------------------去除浏览器自带拖拽地图功能---------------------
  return (<>
	<div onMouseDown={mouseDown} onMouseUp={mouseUp} onMouseMove={mouseMove}>
		{/* ......... */}
	</div>
</>)
}

export default pageIndex

3. 实现效果

暂时无图。。。

1. 可以进行复制选择，但是在选中内容后无法对选中内容进行拖拽。

4. 问题图（拖拽产生的内容影子）