nanodrag
A small library to simplify the handling of drag events on mouse & touch devices.
Usage
const Nanodrag = const div = documentconst nd = nd nd nd nd
API
Properties
preventDefault:boolean
If this is set to true, it will call event.preventDefault()
on the event
provided by the touchmove
or mousemove
event. This property only works
if you did not set {passive: true}
in the constructor.
Examples:
This will attach the listener in passive mode and prevent the calling of
event.preventDefault
regardless of what value Nanodrag.preventDefault
is.
const nd = element passive: true
This will attach the listener in active mode allowing you decide to call
event.preventDefault
at a later time.
const nd = elementnd
Methods
new Nanodrag(selector:string|element:HTMLElement, options?:object(key:any)):nanodrag
Create a new nanodrag instance. You can either pass in a valid selector for
.querySelector
or a reference to an HTML element. A nanodrag instance is also
an instance of a nanobus object.
options
trackingDelay
?:number - the delay (in nanoseconds) to wait before turning off the tracking mode if the mouse escapes the tracked element. Default: 300passive
?:boolean - attachtouchmove
andmousemove
as passive listeners. This will prevent callingevent.preventDefault
on move events.
nanodrag#on(event:string, listener:function)
Provide a function to invoke when the specified event is triggered
nanodrag#once(event:string, listener:function)
Attach an event to invoke only once
nanodrag#emit(event:string, data:any)
Invoke an event with a specific payload of data
nanodrag#removeListener(event:string, listener:function)
Remove a specific listener
nanodrag#removeAllListeners(event?:string)
Remove all listeners for a given event; if no event is specified, removed all listeners.
nanodrag#close()
Remove all listeners on the DOM as well as on the nanobus instances and stop reporting any move events
Events
start
Triggered when a touch start or mouse down event occur on the nanodrag element.
data
start
:objectx
:number - the x coordinate of the touch instrument or mousey
:number - the y coordinate of the touch instrument or mouse
move
Triggered when the mouse or touch instrument is moved after being started. For mouse-like devices, this means the button must be actively held down
data
start
:objectx
:number - the starting x coordinate of the touch instrument or mousey
:number - the starting y coordinate of the touch instrument or mouse
current
:objectx
:number - the current x coordinate of the touch instrument or mousey
:number - the current y coordinate of the touch instrument or mouse
direction
:objectx
:string - either 'left' or 'righty
:string - either 'up' or 'down
end
Triggered when the touchend or mouseup event occurs.
data
start
:objectx
:number - the starting x coordinate of the touch instrument or mousey
:number - the starting y coordinate of the touch instrument or mouse
end
:objectx
:number - the end x coordinate of the touch instrument or mousey
:number - the end y coordinate of the touch instrument or mouse
License
Copyright © 2018 Todd Kennedy, Apache 2.0 License