DragGesture

A drag gesture is a sequence of "pointer down, move & up". It is commonly used to build sliders or knobs.

modifier DragGesture

Example

import { DragGesture, DragGestureEvent, Rectangle, Point, Frame, Position } from ui

component DraggableBox {
    position: Point = Point(x: 0, y: 0)

    Rectangle(color: Color(0xFFFF0000)) with {
        Frame(width: 50, height: 50)
        Position(x: self.position.x, y: self.position.y)
        DragGesture(
            minimum_distance: 0,
            start: fun (event: DragGestureEvent) {
                self.position = Point(x: event.position.x - 25, y: event.position.y - 25)
            },
            update: fun (event: DragGestureEvent) {
                self.position = Point(x: event.position.x - 25, y: event.position.y - 25)
            }
        )
    }
}

export var main: Component = DraggableBox()

Note

This gesture is not intended to be used for typical Drag & Drop behavior.

Constructors

Move Handler

constructor(_ handler: (DragGestureEvent) -> ())

_ handler: (DragGestureEvent) -> ()

Called when the pointer moves.

See DragGestureEvent.

---

Lifecycle Callbacks

constructor(minimum_distance: Float = 10, start: (DragGestureEvent) -> (), update: (DragGestureEvent) -> (), complete: (DragGestureEvent) -> ())

minimum_distance: Float = 10

The minimum distance the cursor has to move after the tap down before the gesture starts responding.

This is important if you want to combine both TapGesture and DragGesture on the same component.

start: (DragGestureEvent) -> ()

Called once when the gesture starts.

update: (DragGestureEvent) -> ()

Called when the pointer moves.

This callback is also called together with start, so it's not necessary to provide both callbacks unless you need to do something specific only during start.

complete: (DragGestureEvent) -> ()

Called when the pointer up occurs and the gesture is completed.

Layout Behavior

None