Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Custom events 'movestart', 'move' and 'moveend' for jQuery.

branch: master
README.md

jquery.event.move

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

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.
move
Fired on every animation frame where a mousemove or touchmove has changed the cursor position.
moveend
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:

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 normally bind to events in jQuery:


jQuery('.mydiv')
.bind('movestart', function(e) {
    // move starts.

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

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

});

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

Tweet me

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

Something went wrong with that request. Please try again.