const drag = useVerticalDrag({
  minOffsetY: 16,
  maxOffsetY: 560,
  onTap: onOpen,
})

interface UseVerticalDragOptions {
  initialOffsetY?: number
  minOffsetY: number
  maxOffsetY: number
  disabled?: boolean
  onTap: () => void
  onDragEnd?: (offsetY: number) => void
}

interface DragSession {
  identifier: number
  startClientX: number
  startClientY: number
  startOffsetY: number
  hasDragged: boolean
}
 
const DRAG_THRESHOLD_PX = 8
const [offsetY, setOffsetY] = useState(initialOffsetY)
const currentOffsetRef = useRef(initialOffsetY)
const sessionRef = useRef<DragSession | null>(null)

const touch = event.changedTouches[0] ?? event.touches[0]
if (!touch) return
 
sessionRef.current = {
  identifier: touch.identifier,
  startClientX: touch.clientX,
  startClientY: touch.clientY,
  startOffsetY: currentOffsetRef.current,
  hasDragged: false,
}

const session = sessionRef.current
if (!session) return
 
const touch = Array.from(event.touches).find(
  item => item.identifier === session.identifier,
)
if (!touch) return
 
const deltaX = touch.clientX - session.startClientX
const deltaY = touch.clientY - session.startClientY
const distance = Math.hypot(deltaX, deltaY)

if (!session.hasDragged && distance < DRAG_THRESHOLD_PX) {
  return
}
 
session.hasDragged = true
 
const nextOffsetY = Math.min(
  maxOffsetY,
  Math.max(minOffsetY, session.startOffsetY + deltaY),
)
 
currentOffsetRef.current = nextOffsetY
setOffsetY(nextOffsetY)

document.addEventListener(
  "touchmove",
  handleMove,
  { passive: false }, // 监听器可能调用 preventDefault()
)
document.addEventListener("touchend", handleFinish, { passive: false })
document.addEventListener("touchcancel", handleFinish)

<div onTouchMove={handleMove} />

document.addEventListener("touchmove", handleMove, {
  passive: false,
})

const deltaY = touch.clientY - session.startClientY
const distance = Math.hypot(
  touch.clientX - session.startClientX,
  deltaY,
)
 
if (distance < DRAG_THRESHOLD_PX) {
  return
}
 
event.preventDefault()

// 必须配合注册监听时的 { passive: false }。
if (event.cancelable) {
  event.preventDefault()
}
 
const deltaY = touch.clientY - session.startClientY
const distance = Math.hypot(
  touch.clientX - session.startClientX,
  deltaY,
)
if (!session.hasDragged && distance < DRAG_THRESHOLD_PX) {
  return
}

.pendant[data-drag-disabled="false"] {
  /* 核心：手势开始前声明，这个区域不交给浏览器平移或缩放。 */
  touch-action: none;
 
  /* 下面两项只防文本选择和 WebKit 原生拖拽，不负责阻止滚动。 */
  user-select: none;
  -webkit-user-drag: none;
}

import {
  useLayoutEffect,
  useRef,
  useState,
  type TouchEventHandler,
} from "react"
 
const DRAG_THRESHOLD_PX = 8
const NON_CANCELABLE_CLICK_GUARD_MS = 700
 
interface UseVerticalDragOptions {
  initialOffsetY?: number
  minOffsetY: number
  maxOffsetY: number
  disabled?: boolean
  onTap: () => void
  onDragEnd?: (offsetY: number) => void
}
 
interface DragSession {
  identifier: number
  startClientX: number
  startClientY: number
  startOffsetY: number
  hasDragged: boolean
}
 
function useLatest<T>(value: T) {
  const ref = useRef(value)
 
  // DOM 更新后立即保存最新值，供稳定的原生监听函数读取。
  useLayoutEffect(() => {
    ref.current = value
  }, [value])
 
  return ref
}
 
function useStableTouchListener(handler: (event: TouchEvent) => void) {
  const handlerRef = useLatest(handler)
  const listenerRef = useRef<(event: TouchEvent) => void>(event => {
    handlerRef.current(event)
  })
 
  // 引用始终不变，addEventListener 和 removeEventListener 可以精确配对。
  return listenerRef.current
}
 
export function useVerticalDrag({
  initialOffsetY = 0,
  minOffsetY,
  maxOffsetY,
  disabled = false,
  onTap,
  onDragEnd,
}: UseVerticalDragOptions) {
  const [offsetY, setOffsetY] = useState(initialOffsetY)
  const [isDragging, setIsDragging] = useState(false)
  const currentOffsetRef = useRef(initialOffsetY)
  const sessionRef = useRef<DragSession | null>(null)
  const ignoreClickUntilRef = useRef(0)
  const removeListenersRef = useRef<() => void>(() => {})
  const optionsRef = useLatest({
    minOffsetY,
    maxOffsetY,
    onTap,
    onDragEnd,
  })
 
  const handleMove = useStableTouchListener(event => {
    const session = sessionRef.current
    if (!session) return
 
    // 多指场景下，只追踪 touchstart 时记录的那根手指。
    const touch = Array.from(event.touches).find(
      item => item.identifier === session.identifier,
    )
    if (!touch) return
 
    // 先尝试阻止默认滚动；阈值只用于区分点击和拖拽。
    if (event.cancelable) {
      event.preventDefault()
    }
 
    const deltaX = touch.clientX - session.startClientX
    const deltaY = touch.clientY - session.startClientY
    const distance = Math.hypot(deltaX, deltaY)
    if (!session.hasDragged && distance < DRAG_THRESHOLD_PX) {
      return
    }
 
    if (!session.hasDragged) {
      session.hasDragged = true
      setIsDragging(true)
    }
 
    const { minOffsetY, maxOffsetY } = optionsRef.current
    const nextOffsetY = Math.min(
      maxOffsetY,
      Math.max(minOffsetY, session.startOffsetY + deltaY),
    )
 
    currentOffsetRef.current = nextOffsetY
    setOffsetY(nextOffsetY)
  })
 
  const handleFinish = useStableTouchListener(event => {
    const session = sessionRef.current
    if (!session) return
 
    // touchend 和 touchcancel 都只处理当前追踪的触点。
    const trackedTouchChanged = Array.from(event.changedTouches).some(
      item => item.identifier === session.identifier,
    )
    if (!trackedTouchChanged) return
 
    removeListenersRef.current()
    sessionRef.current = null
    setIsDragging(false)
 
    // 取消只做清理：保留当下位置，不触发点击或拖拽完成回调。
    if (event.type === "touchcancel") return
 
    // 主动产出 tap/drag 语义，并阻止浏览器再合成一次 click。
    if (event.cancelable) {
      event.preventDefault()
    } else {
      // 不可取消时只能使用经目标容器验证过的时间窗兜底。
      ignoreClickUntilRef.current =
        Date.now() + NON_CANCELABLE_CLICK_GUARD_MS
    }
 
    if (session.hasDragged) {
      optionsRef.current.onDragEnd?.(currentOffsetRef.current)
    } else {
      optionsRef.current.onTap?.()
    }
  })
 
  useLayoutEffect(() => {
    const removeListeners = () => {
      document.removeEventListener("touchmove", handleMove)
      document.removeEventListener("touchend", handleFinish)
      document.removeEventListener("touchcancel", handleFinish)
    }
 
    removeListenersRef.current = removeListeners
 
    // 组件卸载时移除原生监听，并使未结束的会话失效。
    return () => {
      removeListeners()
      sessionRef.current = null
    }
  }, [handleMove, handleFinish])
 
  useLayoutEffect(() => {
    if (!disabled || !sessionRef.current) return
 
    // 拖拽过程中被禁用时立即中止，避免会话继续更新位置。
    removeListenersRef.current()
    sessionRef.current = null
    setIsDragging(false)
  }, [disabled])
 
  const onTouchStart: TouchEventHandler<HTMLElement> = event => {
    if (disabled || sessionRef.current) return
 
    const touch = event.changedTouches[0] ?? event.touches[0]
    if (!touch) return
 
    // 新的触摸序列会取代上一序列留下的 click 兜底标记。
    ignoreClickUntilRef.current = 0
 
    // 开始新会话前，先清除可能残留的原生监听。
    removeListenersRef.current()
    sessionRef.current = {
      identifier: touch.identifier,
      startClientX: touch.clientX,
      startClientY: touch.clientY,
      startOffsetY: currentOffsetRef.current,
      hasDragged: false,
    }
 
    document.addEventListener("touchmove", handleMove, {
      passive: false,
    })
    document.addEventListener("touchend", handleFinish, {
      passive: false,
    })
    document.addEventListener("touchcancel", handleFinish)
  }
 
  return {
    offsetY,
    isDragging,
    dragHandleProps: { onTouchStart },
    shouldIgnoreClick: () => {
      const shouldIgnore = Date.now() < ignoreClickUntilRef.current
      // 一个触摸序列至多消费一次兼容性 click。
      ignoreClickUntilRef.current = 0
      return shouldIgnore
    },
  }
}

function FloatingWidget({
  disabled = false,
  onOpen,
}: {
  disabled?: boolean
  onOpen: () => void
}) {
  const {
    offsetY,
    dragHandleProps,
    shouldIgnoreClick,
  } = useVerticalDrag({
    initialOffsetY: 120,
    minOffsetY: 16,
    maxOffsetY: 560,
    disabled,
    onTap: onOpen,
  })
 
  const handleClick = () => {
    // 触摸点击已由 onTap 处理；这里保留鼠标和键盘激活能力。
    if (shouldIgnoreClick()) return
    onOpen()
  }
 
  return (
    <button
      className="pendant"
      type="button"
      disabled={disabled}
      data-drag-disabled={disabled}
      style={{ transform: `translate3d(0, ${offsetY}px, 0)` }}
      {...dragHandleProps}
      onClick={handleClick}
    >
      打开
    </button>
  )
}

.pendant {
  position: fixed;
  top: 0;
  right: 16px;
  width: 64px;
  height: 64px;
}
 
.pendant[data-drag-disabled="false"] {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}