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.
onDragEnd signal the beginning and end of a drag action, respectively. Between these two,
onDrag will be called continuously.
|Basic drag events|
|Dragging started. The layer has been picked up and moved.|
|The layer changed position.|
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."
You can use
onDragEnd to have a layer snap back to its original position.
# The layer’s initial position blueSquare.states.defaultPosition = x: blueSquare.x y: blueSquare.y # Snapping back to the initial position blueSquare.onDragEnd -> @.animate "defaultPosition"
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.
|Drag animation events|
|Start of the momentum or bounce animation.|
|Momentum and bounce animations all ended.|
A basic example prototype:
blueSquare.onDragAnimationStart -> print "The after drag animation did start." blueSquare.onDragAnimationEnd -> print "The after drag animation ended."
onDragAnimationStart event signals when the momentum or bounce animation started. It’ll trigger right after
onDragAnimationEnd will fire once the layer has come to a complete standstill.
With direction lock enabled there will be an
onDirectionLockStart event whenever the layer locks to a specific direction.
onMove event gets triggered continuously whenever the layer moves. This includes any movement: by dragging or caused by momentum or bounce animations.
|Direction lock started.|
|The layer is moving (includes momentum or bounce animation).|
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 = #"
These three events are used in the following example:
onDragStartgrows the layer and adds a shadow
onMoveadjusts the hue and lightness continuously
onDragAnimationEndshrinks 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"
This prototype lets you prepare a magician’s top hat for his hat-trick (which will end with a Bang!).
It uses the
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