Awesome
Pair.coffee
Drag and drop layers.
Cursor-based:
<img alt="cursor based example" src="https://github.com/IanBellomy/Pair/blob/master/examples/DragAndDropFramer.gif" width=308 height=260>Frame-based:
<img alt="frame based example" src="https://github.com/IanBellomy/Pair/blob/master/examples/contactDrop.gif" width=276 height=334>Frame-based contact events without dragging:
<img alt="frame based events with no dragging" src="https://github.com/IanBellomy/Pair/blob/master/examples/contactEvent.gif" width=229 height=381>Usage
Install<br>
Download the Pair.coffee file and place it in the modules folder of your project.<br> 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.
Methods
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"
event handling
onDragStart( (dragged)-> )
When the mouse moves after pressing down on the dragged
.<br>
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 index
Add 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 index
Add 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.
Contact
Twitter: @ianbellomy