Drag events

These events are emitted by a draggable layer. They’re triggered not only when the user is dragging but also afterwards, when the layer is still slowing down before coming to a stop.

Basic drag events

The events onDragStart and onDragEnd signal the beginning and end of a drag action, respectively. Between these two, onDrag will be called continuously.

Here’s a very simple example:

blueSquare.onDragStart ->
    print "Drag started."
blueSquare.onDrag ->
    print "The cursor is at x = #, y = #"
blueSquare.onDragEnd ->
    print "Drag ended."

Using onDragEnd to have a layer snap back

You can use onDragEnd to have a layer snap back to its original position.

Like this:

# The layer’s initial position
blueSquare.states.defaultPosition =
    x: blueSquare.x
    y: blueSquare.y
# Snapping back to the initial position
blueSquare.onDragEnd ->
    @.animate "defaultPosition"

Drag animation events

A layer doesn’t stop moving when the user stops dragging.

By default, momentum and bounce are active, so a draggable layer will briefly animate to a standstill, or bounce back when it’s outside of its constraints.

A basic example prototype:

blueSquare.onDragAnimationStart ->
    print "The after drag animation did start."
blueSquare.onDragAnimationEnd ->
    print "The after drag animation ended."

The onDragAnimationStart event signals when the momentum or bounce animation started. It’ll trigger right after onDragEnd.

And onDragAnimationEnd will fire once the layer has come to a complete standstill.

Other events

With direction lock enabled there will be an onDirectionLockStart event whenever the layer locks to a specific direction.

The onMove event gets triggered continuously whenever the layer moves. This includes any movement: by dragging or caused by momentum or bounce animations.

A simple example with direction lock:

blueSquare.onDirectionLockStart ->
    print "The direction lock kicked in."

Continuous updates of the layer’s position:

blueSquare.onMove ->
    print "The layer is at x = #, y = #"

Example with different drag events

These three events are used in the following example:

• onDragStart grows the layer and adds a shadow
• onMove adjusts the hue and lightness continuously
• onDragAnimationEnd shrinks the layer and removes the shadow

# Start of drag movement
square.onDragStart ->
    this.animate
        scale: 1
        shadowColor: "rgba(153,153,153,1)"

# While moving (also because of momentum)
square.onMove ->
    # Change hue depending on y-position
    # Change lightness depending on x-position

# Put down when it came to a complete standstill
square.onDragAnimationEnd ->
    this.animate
        scale: 0.94
        shadowColor: "White"

Drag events example

Example use: Top hat

This prototype lets you prepare a magician’s top hat for his hat-trick (which will end with a Bang!).

It uses the onDragStart, onDrag, and onDragEnd events.

The hat grows slightly (with a spring animation) when dragging starts.

# grow the hat when dragging starts
magicItem.onDragStart ->
    topHat.animate
        scale: 1.2

The hat is then continuously aimed at the item that’s being dragged.

# rotate the hat to the item during dragging
magicItem.onDrag ->
    # some trigonometry for calculating the rotation
    rotationRadians = Math.atan (this.x - topHat.x) / (this.y - topHat.y)
    # converting radians to degrees
    rotationDegrees = rotationRadians * 180/Math.PI
    # rotating the hat in the direction of the item
    topHat.rotation = -rotationDegrees + 180

Finally, when dragging ends, the hat will swallow the item with an ease-in animation…

# when dragging ends:
magicItem.onDragEnd ->
    # move item to the top hat
    this.animateStop() # Stop possible animations
    this.animate
        x: topHat.x + 45
        y: topHat.y + 10
        options:
            time: 0.4
            curve: "ease-in"

…and then return to its initial state.

    # and after a 0.7 second delay…
    Utils.delay 0.7, ->
        # … reset the hat to its initial state
        topHat.animate
            scale: 1
            rotation: 180

Overview of the drag events