Skip to main content

DragGesture

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

modifier DragGesture
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.

Constructor​

(minimum_distance:start:update:​complete)​

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

DragGestureEvent​

class DragGestureEvent

Properties​

position: Point​

The pointer position in the component's coordinate system.

See Point

start_position: Point​

The pointer position at the start of the DragGestureEvent.

See Point

frame: Rect​

The component's bounding box during the event.

See Rect

delta: Point​

The pointer delta to the last pointer event.

See Point

modifiers: KeyboardModifiers​

The keyboard modifiers that were active during the event. See KeyboardModifiers