Custom events 'movestart', 'move' and 'moveend' for jQuery.
HTML JavaScript CSS
Latest commit 5f97932 Oct 28, 2016 @stephband docs


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

Move events

Fired following mousedown or touchstart, when the pointer crosses a threshold distance from the position of the mousedown or touchstart.
Fired on every animation frame where a mousemove or touchmove has changed the cursor position.
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.

Move event objects are augmented with the properties:

Current page coordinates of pointer.
Page coordinates the pointer had at movestart.
Distance the pointer has moved since movestart.
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) {

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

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

Or if you have jQuery in your project:

.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,


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,


Tweet me

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