gdraghelper

1.0.2 • Public • Published

#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

Readme

Keywords

Package Sidebar

Install

npm i gdraghelper

Weekly Downloads

47

Version

1.0.2

License

ISC

Unpacked Size

13.3 kB

Total Files

5

Last publish

Collaborators

  • orokro