Cursor-based:
Frame-based:
Frame-based contact events without dragging:
Download the Pair.coffee file and place it in the modules folder of your project.
In your framer project, write:
PairModule = require "Pair"Create a pair and enable drag and drop
dragLayer = new Layer
targetLayer = new Layer
myPair = new PairModule.Pair(dragLayer,targetLayer)
myPair.enableDragAndDrop()dragLayer and targetLayer must be Layers with the same parent. dragLayer will be the draggable layer, targetLayer will be the drag target.
In order of importance.
enableDragAndDrop()Once called, the dragLayer will become draggable, and the pair will emit the following events:
"dragStart""dragEnter""dragLeave""dragOver""drop""invalidDrop"
The handlers will be scoped to the Pair object. (i.e. this will refer to the Pair.)
Note, the following events are always emitted unless the pair is put to sleep.
"contactDrop""invalidContactDrop"
onDragStart( (dragged)-> )When the mouse moves after pressing down on the dragged.
onDragEnter( (dragged,dropTarget)-> )When the cursor enters dropTarget while dragged is being dragged.
onDragOver( (dragged,dropTarget)-> )When the cursor moves within dropTarget while dragged is being dragged.
onDragLeave( (dragged,formerDropTarget)-> )When the cursor leaves formerDropTarget while dragged is being dragged.
onInvalidDrop( (dropped)-> )When the mouse is released outside of the original targetLayer while dropped was being dragged.
"invalidDrop"events are emitted before"invalidContactDrop"or"contactDrop"events. A Pair may emit an"invalidDrop"event and a"contactDrop"or"invalidContactDrop".
onDrop( (dropped,dropTarget)-> )When the mouse is released over dropTarget while dropped is being dragged.
"drop"events are emitted before"invalidContactDrop"or"contactDrop"events. A Pair may emit both a"drop"and"contactDrop"events.
onContactDrop( (dropped,dropTarget)-> )When the mouse is released while the dropped layer frame overlaps the dropTarget layer frame.
This event is emitted after "drop" and "invalidDrop"
onInvalidContactDrop( (dropped)-> )When the mouse is released while the dropped layer frame does not overlap the dropTarget frame.
This event is emitted after "drop" and "invalidDrop"
disableDragAndDrop()Once called, the dragLayer will not be draggable, and any drag event listeners will be not be called.
onContactChange(startFn,endFn=->) : returns indexAdd an event listener for when the layers' frames contact starts or ends. The function returns an index which can be used to remove the listener later.
These handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.
Layers' scale and rotation does NOT affect a layers' frame! (This module does not perform pixel-based collision detection or geometric box collision detection.)
offContactChange(index)Opposite of onContactChange()
onRangeChange(min,max,enterFn,exitFn=->) : returns indexAdd event handlers for when the distance between layers enters a specific range. The range is defined by min and max. The enterFn function is called when distance becomes <= max, or >= min. Vice versa for the exitFn.
Distance is measured from the layers' midpoints.
The function returns an index which can be used to remove the listener later.
These handlers will be called regardless of whether drag and drop is enabled, and regardless of whether a layer is dragged.
offRangeChange(index)Opposite of onRangeChange().
getDistance()Returns the distance between the midpoints of dragLayer and targetLayer.
setDistance(value)Sets the distance between the two midpoints of dragLayer and targetLayer by moving targetLayer. Maintains the angle between the two layers.
midPoint() : returns [x,y]Returns the midpoint between the mindpoints of the dragLayer and targetLayer.
sleep()No drag events, range events, or collision events will be emitted.
wake()Drag events, range events, and collision events will be emitted like normal.
destroy()Call this if the pair is no longer needed. It will go to sleep and all event listeners will be removed.
Twitter: @ianbellomy