gdraghelper
v1.0.2
Published
Provides a utility class to help with dragging in the browser. Drag operations utilize two call back methods for mousemove and dragcomplete, passing in deltaX and deltaY in pixels. Uses window level events so drag cannot fall out of element scope.
Downloads
38
Readme
#GDragHelper This provides a utility class called DragHelper.
The problem: when using the mousedown
, mousemove
, mouseup
events on DOM elements, you will stop seeing mouse events if your cursor leaves the bounding area of the DOM element. It would be nice if you could start a drag operation that gives you deltaX
and deltaY
values the entire time the mouse button is down, regardless if the mouse leaves part of the DOM.
#Usage
To use this, create a new drag helper object:
let dragHelper = new DragHelper();
after this is constructed, at any point you can get the mouse position in the window, by calling:
let mousePose = dragHelper.getCursorPos()
Which returns an object like:
{ x: <x mouse position in window space pixels>, y: <y mouse position in window space pixels> }
But for dragging, just call dragStart
, like so:
dragHelper.dragStart( (dx, dy) => { ... }, (dx, dy) => { ... } );
The drag start takes two callback methods. Both take deltaX and deltaY parameters.
The first callback will be called on mousemoves during the drag operation.
The second callback will be called when the drag operation completes.
The deltaX and deltaY values will be in pixels, relative to the mouse position when the drag operation started. (0,0) means the mouse has not moved at all.
#Author: Greg Miller, gmiller.net