jquery.event.move

jQuery special events movestart, move and moveend for tracking touch and mouse moves, throttled to browser animation frames, and exposing information about distance and velocity of fingers.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jquery.event.move
1.3.69 years ago9 years agoMinified + gzip package size for jquery.event.move in KB

Readme

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


<dt>movestart</dt>
<dd>Fired following mousedown or touchstart, when the pointer crosses a threshold distance from the position of the mousedown or touchstart.</dd>
<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 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!