feo-cz / jquery.event.move Goto Github PK

#jquery.event.move

Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

UPDATE 2.0: move events are now compatible with jQuery 3.x. In addition, the underlying implementation is rewritten using vanilla DOM (where before it was jQuery special events only) – jQuery is no longer a requirement. However, if you do not have jQuery you will require a polyfill for Object.assign to support older browsers. I can recommend Object.assign polyfill :)

##Demo and docs

stephband.info/jquery.event.move/

##Move events

movestart

Fired following mousedown or touchstart, when the pointer crosses a threshold distance from the position of the mousedown or touchstart.

<dt>move</dt>
<dd>Fired on every animation frame where a mousemove or touchmove has changed the cursor position.</dd>

<dt>moveend</dt>
<dd>Fired following mouseup or touchend, after the last move event, and in the case of touch events when the finger that started the move has been lifted.</dd>

Move event objects are augmented with the properties:

e.pageX
e.pageY

Current page coordinates of pointer.

e.startX
e.startY

Page coordinates the pointer had at movestart.

e.deltaX
e.deltaY

Distance the pointer has moved since movestart.

e.velocityX
e.velocityY

Velocity in pixels/ms, averaged over the last few events.

Use them in the same way as you bind to any other DOM event:

var node = document.querySelector('.mydiv');

// A movestart event must be bound and explicitly
// enabled or other move events will not fire
node.addEventListener('movestart', function(e) {
  e.enableMove();
});

node.addEventListener('move', function(e) {
  // move .mydiv horizontally
  this.style.left = (e.startX + e.distX) + 'px';
});

node.addEventListener('moveend', function() {
  // move is complete!
});

Or if you have jQuery in your project:

jQuery('.mydiv')
.on('move', function(e) {
  // move .mydiv horizontally
  jQuery(this).css({ left: e.startX + e.deltaX });

}).bind('moveend', function() {
  // move is complete!
});

(.enableMove() is a performance optimisation that avoids unnecessarily sending move when there are no listeners. jQuery's special event system does the work of enabling move events so using jQuery there is no need to explicitly bind to movestart.)

To see an example of what could be done with it, stephband.info/jquery.event.move/

##CommonJS

If you're using Browserify, or any other CommonJS-compatible module system, you can require this script by passing it your jQuery reference. For example,

require('./path/to/jquery.event.move.js')();

##Tweet me

If you use move events on something interesting, tweet me @stephband!