Skip to content
Custom events 'movestart', 'move' and 'moveend' for jQuery.
HTML JavaScript
Latest commit b7e34b0 Dec 13, 2015 @stephband Merge pull request #25 from theqwertman/master
Made script Browserify-compatible

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/

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')(jQuery);

Tweet me

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

Something went wrong with that request. Please try again.