Lynx UI logo
Lynx UI
  • English

      • <Draggable>

      A headless Draggable component for ReactLynx. It provides drag-and-drop primitives via main-thread execution.

      Basic Usage

      Draggable supports two gesture modes: immediate (drag starts instantly on touch) and longpress (drag starts after a long press gesture). You can also control whether the position resets when the drag ends or preserves its transform position.

      lynx-ui-draggableBasic/index.tsx
      Code
      Preview

      With bounds

      The draggable area allowed can be limited with min(max)TranslateX/Y props.

      lynx-ui-draggableWithBounds/index.tsx
      Code
      Preview

      Structure

      The whole component is draggable.

      <Draggable />

      Only the DraggableArea accepts the dragging gesture.

      <DraggableRoot>
  <DraggableArea />
</DraggableRoot>

      API

      Draggable

      allowedDirection
      iOS
      Android
      Harmony
      Typedirections·Default'all'
      The direction of the drag.
      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      debugLog
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Display debug logs. Open it when you find a bug.
      draggableProps
      iOS
      Android
      Harmony
      TypeViewProps
      Extra props for draggable. It accepts all the props of the normal view.
      enableDragging
      iOS
      Android
      Harmony
      Typeboolean·Defaulttrue
      Whether the component is draggable.
      id
      iOS
      Android
      Harmony
      Typestring
      Id
      maxTranslateX
      iOS
      Android
      Harmony
      Typenumber
      The maximum value of the X-axis translation.
      maxTranslateY
      iOS
      Android
      Harmony
      Typenumber
      The maximum value of the Y-axis translation.
      minTranslateX
      iOS
      Android
      Harmony
      Typenumber
      The minimum value of the X-axis translation.
      minTranslateY
      iOS
      Android
      Harmony
      Typenumber
      The minimum value of the Y-axis translation.
      MTSRef
      iOS
      Android
      Harmony
      TypeRefObject
      main-thread:ref
      onDragEnd
      iOS
      Android
      Harmony
      Type(translate: Point) => void
      Triggers when the drag is over
      onDragging
      iOS
      Android
      Harmony
      Type(translate: Point) => void
      Triggers when the item is dragging
      onDragStart
      iOS
      Android
      Harmony
      Type(pagePoint: Point) => void
      Triggers when the item starts to be dragged
      onMTSDragEnd
      iOS
      Android
      Harmony
      Type(translate: Point, event: MouseEvent | TouchEvent) => void
      Triggered when the dragging ends. It runs on the main thread, allowing for more timely UI operations. Please ensure that the passed handler is a main thread function, i.e., a function marked with 'main thread'.
      onMTSDragging
      iOS
      Android
      Harmony
      Type(translate: Point, event: MouseEvent | TouchEvent) => void
      Triggered when the dragging ends. It runs on the main thread, allowing for more timely UI operations. Please ensure that the passed handler is a main thread function, i.e., a function marked with 'main thread'.
      onMTSDragStart
      iOS
      Android
      Harmony
      Type(pagePoint: Point, event: MouseEvent | TouchEvent) => void
      Triggered during the dragging process. It runs on the main thread, allowing for more timely UI operations. Please ensure that the passed handler is a main thread function, i.e., a function marked with 'main thread'.
      resetOnEnd
      iOS
      Android
      Harmony
      Typeboolean
      Reset the transform to 0 when the dragging process ends.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      trigger
      iOS
      Android
      Harmony
      Typelongpress | immediate·Default'longpress'
      The way to trigger the drag.

      DraggableArea

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      id
      iOS
      Android
      Harmony
      Typestring
      Id
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.