For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/ui/components/draggable.md.
lynx-ui logo
lynx-ui
  • 简体中文

      • <Draggable>

      一个适用于 ReactLynx 的无样式拖拽组件，通过主线程执行提供拖拽基础能力。

      基本用法

      Draggable 支持两种手势模式：immediate（触摸后立即开始拖拽）和 longpress（长按后开始拖拽）。 你也可以控制拖拽结束后的位置是重置，还是保留当前的 transform 位置。

      lynx-ui-draggableBasic/index.tsx
      Code
      预览

      带边界限制

      可拖拽区域可以通过 min(max)TranslateX/Y 属性进行限制。

      lynx-ui-draggableWithBounds/index.tsx
      Code
      预览

      结构

      整个组件都可以被拖拽。

      <Draggable />

      只有 DraggableArea 会响应拖拽手势。

      <DraggableRoot>
  <DraggableArea />
</DraggableRoot>

      API

      Draggable

      allowedDirection
      iOS
      Android
      Harmony
      类型directions·默认值'all'
      允许的拖拽方向
      children
      iOS
      Android
      Harmony
      类型ReactNode
      子节点
      className
      iOS
      Android
      Harmony
      类型string
      类名
      debugLog
      iOS
      Android
      Harmony
      类型boolean·默认值false
      显示调试日志，发现问题时开启。
      draggableProps
      iOS
      Android
      Harmony
      类型ViewProps
      可拖拽组件的额外属性。接受普通 view 的所有属性。
      enableDragging
      iOS
      Android
      Harmony
      类型boolean·默认值true
      组件是否可拖拽
      id
      iOS
      Android
      Harmony
      类型string
      id
      maxTranslateX
      iOS
      Android
      Harmony
      类型number
      X 轴方向 translate 的最大值
      maxTranslateY
      iOS
      Android
      Harmony
      类型number
      Y 轴方向 translate 的最大值
      minTranslateX
      iOS
      Android
      Harmony
      类型number
      X 轴方向 translate 的最小值
      minTranslateY
      iOS
      Android
      Harmony
      类型number
      Y 轴方向 translate 的最小值
      MTSRef
      iOS
      Android
      Harmony
      类型RefObject
      main-thread:ref
      onDragEnd
      iOS
      Android
      Harmony
      类型(translate: Point) => void
      当拖拽结束时触发
      onDragging
      iOS
      Android
      Harmony
      类型(translate: Point) => void
      当拖拽进行时触发
      onDragStart
      iOS
      Android
      Harmony
      类型(pagePoint: Point) => void
      当拖拽开始时触发
      onMTSDragEnd
      iOS
      Android
      Harmony
      类型(translate: Point, event: MouseEvent | TouchEvent) => void
      当拖拽结束时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。
      onMTSDragging
      iOS
      Android
      Harmony
      类型(translate: Point, event: MouseEvent | TouchEvent) => void
      当拖拽结束时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。
      onMTSDragStart
      iOS
      Android
      Harmony
      类型(pagePoint: Point, event: MouseEvent | TouchEvent) => void
      当拖拽进行时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。
      resetOnEnd
      iOS
      Android
      Harmony
      类型boolean
      当拖拽结束时复位 transform
      style
      iOS
      Android
      Harmony
      类型CSSProperties
      样式
      trigger
      iOS
      Android
      Harmony
      类型longpress | immediate·默认值'longpress'
      触发拖拽的方式

      DraggableArea

      children
      iOS
      Android
      Harmony
      类型ReactNode
      子节点
      className
      iOS
      Android
      Harmony
      类型string
      类名
      id
      iOS
      Android
      Harmony
      类型string
      id
      style
      iOS
      Android
      Harmony
      类型CSSProperties
      样式
      除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。