Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.
stephband.info/jquery.event.move/
- 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 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/
If you use move events on something interesting, tweet me @stephband!